1

サイトのユーザーが投稿を送信する前にプレビューできるようにしたいと考えています。クラス「.input_form」のページにいくつかの異なるフォームがあります。次のコードは、クラス '.preview_post' を持つボタンにクリック関数をバインドして、それぞれのフォームをシリアル化して処理します。これとは別に、qTip2 インスタンスを同じボタンにバインドしています。この qtip は、AJAX 呼び出しによって動的に入力される div、「#preview_pop」を表示します。AJAX 呼び出しが返されるように、qTip にわずかな遅延を含めました。以下のコードは問題なく動作しますが、最初のクリックで常に表示されるとは限りません。qtip API を使用してこれを行うより良い方法があるはずです。何時間も試した後、それを機能させることができません。どんな助けでも大歓迎です！

    $('.preview_post').qtip( 
{
    content: {
        text: $('#preview_pop'),
        title: {
            text: 'Post Preview',
            button: 'Close'
            }
        },
    position: {
        my: 'bottom left',
        at: 'top left',
        viewport: $(window) // Keep it on screen if possible
    },
    show: { 
        event: 'click',
        modal: {
            on: true,
            blur: false
            },
        delay: 400
        },
    //hide: 'unfocus', // Hide the tooltip when it loses focus  
    style: {
           classes: 'ui-tooltip-light'
         }
});

$('.preview_post').click(function(){
    var preview_post =  $(this).parents('.input_form').serialize();
    //alert (preview_post);
    $.ajax({
        type:   'POST',
        url:    'get_preview.php',
        data: preview_post,
        success: function(data){
            //alert (data);
            $('#preview_pop').html(data);
        }   
    }); 
});
4

1 に答える 1

0

以下はqTipのCraigからの解決策です-ありがとう!!! うまくいけば、これは他の人を助けるでしょう。

$('a').qtip({
    content: {
        text: $('#preview_pop'),
        title: {
            text: 'Post Preview',
            button: 'Close'
        }
    },
    position: {
        my: 'bottom left',
        at: 'top left',
        viewport: $(window) // Keep it on screen if possible
    },
    show: {
        event: 'click',
        modal: {
            on: true,
            blur: false
        },
        delay: 400
    },
    //hide: 'unfocus', // Hide the tooltip when it loses focus  
    style: {
        classes: 'ui-tooltip-light'
    },
    events: {
        show: function(event, api) {
            var preview_post = api.elements.target
                .parents('.input_form').serialize();

            api.set({
                'content.ajax': {
                    type: 'POST',
                    url: 'get_preview.php',
                    data: preview_post
                }
            });
        }
    }
});

</ p>

于 2012-04-06T18:37:16.890 に答える