序列化表單，使用AJAX進行處理，在qTip2中顯示

Question

我希望允許我網站上的用戶在提交之前預覽他們的帖子。我在頁面上用'.input_form'類有幾種不同的形式。以下代碼將點擊函數綁定到類'.preview_post'的按鈕以序列化和處理相應的表單。另外，我將qTip2實例綁定到相同的按鈕。這個qtip顯示一個div，'#preview_pop'由AJAX調用動態填充。我在qTip中包含了一些延遲，以允許AJAX調用返回。下面的代碼工作正常，但並不總是出現在第一次點擊。似乎應該有一個更好的方式與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); 
     } 
    }); 
}); 

Answer 1

以下是克雷格在qTip上的解決方案 - 謝謝!!!希望這會幫助其他人。

$('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 
       } 
      }); 
     } 
    } 
});