qTip2中的Ajax表单

Question

我有一张表格，列出了每条记录的名称，属性和注释。我希望能够在工具提示中显示评论，并且能够通过Ajax更新这些评论。我想通过点击链接来显示工具提示或模式。这个模式将会有一个textarea，并且预装了注释。用户可以修改注释并通过Ajax将其提交给操作页面。成功提交后，现有的工具提示内容也需要更新。

任何帮助将不胜感激。

我正在使用qtip2和醉酒插件。

我正在通过ajax在qTip2工具提示onclick中加载表单。表单的链接从rel标签中移除。现在，当我提交表单时，它不会通过ajax提交，而是直接提交操作页面。这是我的JS代码：

$('.commentsedit').each(function() 
     { 
      // We make use of the .each() loop to gain access to each element via the "this" keyword... 
      $(this).qtip(
      { 
       content: { 
        // Set the text to an image HTML string with the correct src URL to the loading image you want to use 
        text: '<img class="throbber" src="images/throbber.gif" alt="Loading..." />', 
        ajax: { 
         url: $(this).attr('rel') // Use the rel attribute of each element for the url to load 
        }, 
        title: { 
         text: $(this).attr('title'), // Give the tooltip a title using each elements text 
         button: true 
        } 
       }, 
       position: { 
        at: 'bottom center', // Position the tooltip above the link 
        my: 'top right', 
        viewport: $(window), // Keep the tooltip on-screen at all times 
        effect: false // Disable positioning animation 
       }, 
       show: { 
        event: 'click', 
        solo: true // Only show one tooltip at a time 
       }, 
       hide: 'unfocus',    
       style: { 
        classes: 'my_width_setting_class qtip-wiki qtip-light qtip-shadow' 
       }, 
       events: { 
        render: function(event, api) { 
         // Capture the form submission 
         $('form', this).bind('submit', function(event) { 
          // Grab and store input elements 
          var inputs = $(':textarea', this); 

          // Common ajax error handler 
          function errorHandler(jqXHR, message) { 
           // Set the error and show/hide it 
           $('.error', api.elements.tooltip).html(message || '').toggle(!!message); 
          } 

          // Setup AJAX request 
          $.ajax({ 
           url: 'commentsform.cfm', 
           data: $(this).serialize(), 
           type: 'post', 
           dataType: 'json', 
           success: function(data, status, jqXHR) { 
            // On success, show message and refresh after 2 seconds 
            if(data.status === 'success'){ 
             api.set('content.text', data.message + ' Redirecting...'); 
             setTimeout(function(){ window.location.reload() }, 2000); 
            } 

            // Call error handler on error status too. 
            else { errorHandler(jqXHR, data.message); } 
           }, 
           error: errorHandler, 

           // Disable/Enable input elements 
           beforeSend: function() { inputs.attr('disabled', 'disabled'); }, 
           complete: function() { inputs.removeAttr('disabled'); inputs[0].focus(); } 
          }); 

          // Prevent normal form submission 
          event.preventDefault(); 
         }); 
        } 
       } 
      }) 
     }) 

Answer 1

虽然一个老问题，我认为有人会找到有用的qtip2开发者的网站，特别是在
http://craigsworks.com/projects/forums/showthread.php?tid=3680

编辑提出了类似的问题的解决方案：在回复评论我重现答案的主要部分作为参考：

$('a[class=qTipForm][rel]').each(function(){ 
    var formName = $(this).attr('name'); 

    $(this).qtip({ 
     content: { 
      //text: '<iframe src="'+$(this).attr('rel')+'" height="400px" width="700px" frameborder="0"></iframe>', 
      text: 'Loading...', 
      ajax: { 
       url: $(this).attr('rel'), 
       success: function(data) { 
        // Set the tooltip contents 
        this.set('content.text', data); 

        // Bind the form submit event 
        $('#' + formName).bind('submit', function(event) { 
         // Grab and store input elements 
         var inputs = $(':input','#' + formName); 

         // Common ajax error handler 
         function errorHandler(jqXHR, message) { 
          // Set the error and show/hide it 
          $('.error', api.elements.tooltip).html(message || '').toggle(!!message); 
         } 

         // Setup AJAX request 
         $.ajax({ 
          url: $('#' + formName).attr('action'), 
          data: $('#' + formName).serialize(), 
          type: 'post', 
          dataType: 'json', 
          success: function(data, status, jqXHR) { 
           // On success, show message and refresh after 2 seconds 
           if(data.status === 'success'){ 
            api.set('content.text', ' Redirecting...'); 
            setTimeout(function(){ window.location.reload() }, 2000); 
           } 

           // Call error handler on error status too. 
           else { errorHandler(jqXHR, data.message); } 
          }, 
          error: errorHandler, 

          // Disable/Enable input elements 
          beforeSend: function() { inputs.attr('disabled', 'disabled'); }, 
          complete: function() { inputs.removeAttr('disabled'); inputs[0].focus(); } 
         }); 

         // Prevent normal form submission 
         event.preventDefault(); 
        }) 
       } 
      }, 
      title: { 
       text: $(this).attr('title'), 
       button: true 
      } 
     }, 
     position: { 
      my: 'center', 
      at: 'center', // Position the tooltip above the link 
      target:$(window), 
      effect: false // Disable positioning animation 
     }, 
     show: { 
      event: 'click', 
      solo: true, // Only show one tooltip at a time 
      modal: true 
     }, 
     hide: false, 
     style: { 
      classes: 'viewTipForm ui-tooltip-rounded ui-tooltip-light', 
      tip: false 
     } 
    }) 

    .click(function(event) { event.preventDefault(); }); 
})