如何在ajax中延遲提交表單然後

Question

我有一個頁面上的svgs被轉換爲canvas，然後成功發佈html2canvas數據。我遇到的麻煩是在發佈html2canvas數據後提交表單。我試圖簡單地使用

$('#chartInfo').submit() 

在AJAX成功和錯誤，但不執行。所以，我試圖玩延遲下面提交表單，但我得到ajaxDfd是未定義的？我不確定我在哪裏出錯。我猜這是因爲我在ajax中使用延遲？

$(document).ready(function() { 

    $('#save_dashboard').click(function() { 

     // Declare an array to store all deferred objects from each svg element 
     var svgDfds = [], 
      ajaxDfd 
      targetElem = $('#contentzone-outer'); 

     targetElem.find('svg').each(function() { 
      var dfd = new $.Deferred(), 
       svg = $(this), 
       canvas = $('<canvas></canvas>'); 

      svg.replaceWith(canvas); 

      // Get the raw SVG string and curate it 
      var content = svg.wrap('<p></p>').parent().html(); 
      content = content.replace(/xlink:title='hide\/show'/g, ''); 
      content = encodeURIComponent(content); 
      svg.unwrap(); 

      // Create an image from the svg 
      var image = new Image(); 
      image.src = 'data:image/svg+xml,' + content; 
      image.onload = function() { 
       canvas[0].width = image.width; 
       canvas[0].height = image.height; 

       // Render the image to the canvas 
       var context = canvas[0].getContext('2d'); 

       // Resolve or reject the deferred 
       dfd.resolve(context.drawImage(image, 0, 0)); 
      }; 

      // Push deferred object into array 
      svgDfds.push(dfd); 

     }); // end of targetElem.find('svg').map(function() {...}); 

     // Check for all deferreds 
     $.when.apply($, svgDfds).then(function(_canvas) { 
      console.log('svgDfds resolve done', _canvas); 
      ajaxDfd = new $.Deferred(); 

      $('#contentzone-outer').html2canvas({ 
       onrendered: function (canvas) { 
        //Set dashboardPng value to image data (base-64 string) 
        var dashboardPng = canvas.toDataURL('image/png'); 
        console.log('dashboardPng: ' + dashboardPng); 

        $.ajax({ 
         url:'save_dashboard_image.php', 
         data:{dashboardPngData: dashboardPng}, 
         type:'POST', 
         dataType:'json', 
         success: function(){ 
          console.log('success'); 
         } 
         , 
         error: function(xhr, status, error){ 
          console.log('The requested page was: ' + document.URL + 
           '. The error number returned was: ' + xhr.status + 
           '. The error message was: ' + error); 
         } 
        }) 
        .done(function(){ 
         console.log('AJAX success()'); 
        }) 
        .always(function(){ 
         ajaxDfd.resolve(console.log('AJAX complete()')); 
         return ajaxDfd.promise(); 
        }) 
        .fail(function(){ 
         console.log('AJAX error()'); 
        }); // end of save_dashboard_image.php 
       } // end of html2canvas 
      }); // end of onrendered 
     }); // end of $.when.apply($, svgDfds).then(function(_canvas) {...} 

     ajaxDfd.done(function(){ 
      $('#chartInfo').submit(); 
     }); 
    }); // end of save_dashboard click function 
}); // end of document ready 

Answer 1

// Declare an array to store all deferred objects from each svg element 
    var svgDfds = [], 
     ajaxDfd 
     targetElem = $('#contentzone-outer'); 

你 'ajaxDfd' 後忘記一個逗號。

UPDATE： 你試圖調用方法來完成的

$.when.apply($, svgDfds).then(function(_canvas) { .. } 

我相信這是異步（=> ajaxDfd仍然是不確定的閱讀ajaxDfd.done（...）的時刻之外。 你爲什麼不嘗試把裏面的（也許在底部）的

$.when.apply($, svgDfds).then(function(_canvas) { 
     ..... 
     ajaxDfd.done(function(){ 
      $('#chartInfo').submit(); 
     }); 
    } 

Answer 2

我用普通的老阿賈克斯，而不是試圖用提交（），它反正工作了。

$(document).ready(function() { 

    $('#save_dashboard').click(function() { 

     var chartInfoSerialized = $('#chartInfo').serialize(); 
     console.log('chartInfoSerialized: ' + chartInfoSerialized); 

     $.ajax({ 
      url:'createDashboard_and_ReportPair.php', 
      data: chartInfoSerialized, 
      type:'POST', 
      dataType:'json', 
      success: function(){ 
       console.log('createDashboard_and_ReportPair.php success'); 
      }, 
      error: function(xhr, status, error){ 
       console.log('The requested page was: ' + document.URL + 
        '. The error number returned was: ' + xhr.status + 
        '. The error message was: ' + error); 
      } 
     }) // end of POST request to createDashboard_and_ReportPair.php 
     .always(function() { 
      console.log('AJAX complete createDashboard_and_ReportPair.php'); 

     }); 

     // Declare an array to store all deferred objects from each svg element 
     var svgDfds = [], 
      ajaxDfd, 
      targetElem = $('#contentzone-outer'); 

     targetElem.find('svg').each(function() { 
      var dfd = new $.Deferred(), 
       svg = $(this), 
       canvas = $('<canvas></canvas>'); 

      svg.replaceWith(canvas); 

      // Get the raw SVG string and curate it 
      var content = svg.wrap('<p></p>').parent().html(); 
      content = content.replace(/xlink:title='hide\/show'/g, ''); 
      content = encodeURIComponent(content); 
      svg.unwrap(); 

      // Create an image from the svg 
      var image = new Image(); 
      image.src = 'data:image/svg+xml,' + content; 
      image.onload = function() { 
       canvas[0].width = image.width; 
       canvas[0].height = image.height; 

       // Render the image to the canvas 
       var context = canvas[0].getContext('2d'); 

       // Resolve or reject the deferred 
       dfd.resolve(context.drawImage(image, 0, 0)); 
      }; 

      // Push deferred object into array 
      svgDfds.push(dfd); 

     }); // end of targetElem.find('svg').map(function() {...}); 

     // Check for all deferreds 
     $.when.apply($, svgDfds).then(function(_canvas) { 
      console.log('svgDfds resolve done', _canvas); 
      ajaxDfd = new $.Deferred(); 

      $('#contentzone-outer').html2canvas({ 
       onrendered: function (canvas) { 
        //Set dashboardPng value to image data (base-64 string) 
        var dashboardPng = canvas.toDataURL('image/png'); 
        console.log('dashboardPng: ' + dashboardPng); 

        $.ajax({ 
         url:'save_dashboard_image.php', 
         data:{dashboardPngData: dashboardPng}, 
         type:'POST', 
         dataType:'json', 
         success: function(){ 
          console.log('success'); 
         } 
         , 
         error: function(xhr, status, error){ 
          console.log('The requested page was: ' + document.URL + 
           '. The error number returned was: ' + xhr.status + 
           '. The error message was: ' + error); 
         } 
        }) 
        .done(function(){ 
         console.log('AJAX success()'); 
        }) 
        .always(function(){ 
         ajaxDfd.resolve(console.log('AJAX complete()')); 
         // return ajaxDfd.promise(); 
         $('#chartInfo').submit(); 
        }) 
        .fail(function(){ 
         console.log('AJAX error()'); 
        }); // end of save_dashboard_image.php 
       } // end of html2canvas 
      }); // end of onrendered 
     }); // end of $.when.apply($, svgDfds).then(function(_canvas) {...} 
    }); // end of save_dashboard click function 
}); // end of document ready