鏈接Ajax請求基於jQuery結果。每個只發送之前發送一次

Question

我已經修改了Magento處理類別的方式，以允許用戶通過鏈接將添加到購物車的ajax請求鏈接在一起從類別頁一次添加多個可配置產品網址。

基本上，用戶選擇一個複選框，他們想要添加的項目，這給出<li>該產品是在一個'積極'類。這個jQuery抓住每個有活躍類的<li>，然後從變量theLink中選定的下拉列表中抓取'add to cart URL'。

$j('li.active').each(function(){ 
      var theLink = $j(this).find('.shopthislookpageselect').val(); 
      var successString = "was added to your shopping cart." 
      $j.ajax({ 
       beforeSend: function(){$j('#modalBackground').show();}, 
       type:"POST", 
       url: theLink, 
       success: function(data){ 
        var returnPage = data; 
        var exists = (returnPage.indexOf(successString) !== -1); 
        if (exists) {$j('.col-main').prepend('<ul class="messages"><li class="success-msg"><ul><li><span>The items selected were added to your shopping cart. View your cart <a href="https://www.culturekings.com.au/checkout/cart/">HERE</a></span></li></ul></li></ul>'); $j("html, body").animate({ scrollTop: 0 }, "slow"); } 
        else {alert ('There was a problem adding these products to your cart. \n Please select the View Full Product Info link to add these items individually.')} 
        }, 
       error: function(){alert('There was a problem adding these products to your cart. \n Please select the View Full Product Info link to add these items individually.');}, 
       complete: function(){$j('#modalBackground').fadeOut(200);} 
      }); 
}); 

在div modalBackground是具有加載GIF這是應該在每個AJAX調用的開始顯示，並隱藏在端部具有透明的全寬度和高度覆蓋。

問題是modalBackground顯示在第一個ajax調用的開始處並隱藏在結尾處，但之後它不再顯示任何其他調用。我可以看到這個函數仍在運行，因爲我可以計算成功函數每次成功調用結束時顯示的成功消息。

以前是否只發一次？如果是這樣，爲什或者我應該爲疊加處理方式做出不同的處理。

請注意，如果Magneto添加到購物車控制器中沒有改變大的東西，它將無法處理一次添加所有產品，所以我被困在做這些多個Ajax請求。

Answer 1

這裏有一個辦法：

// this will store the ajax requests with are jQuery.Deferred() 
var promises = []; 

// ajaxSettings.beforeSend is actually better to use to modify the xhr. 
// You can just do this beforehand. 
$j('#modalBackground').show(); 
$j('li.active').each(function(){ 
    // all your other stuff 
    // success and error callbacks will still run for each one. 
    promises.push($j.ajax({ 
     type:"POST", 
     url: theLink, 
     success: function(data){ 
      var returnPage = data; 
      var exists = (returnPage.indexOf(successString) !== -1); 
      if (exists) {$j('.col-main').prepend('<ul class="messages"><li class="success-msg"><ul><li><span>The items selected were added to your shopping cart. View your cart <a href="https://www.culturekings.com.au/checkout/cart/">HERE</a></span></li></ul></li></ul>'); $j("html, body").animate({ scrollTop: 0 }, "slow"); } 
      else {alert ('There was a problem adding these products to your cart. \n Please select the View Full Product Info link to add these items individually.')} 
     }, 
     error: function(){alert('There was a problem adding these products to your cart. \n Please select the View Full Product Info link to add these items individually.');} 
    })); 
}); 

// What this does is gathers all those jQuery.Deferred and when 
// all of them are done, runs the done callback. 
$j.when.apply($, promises).done(function() { 
    $j('#modalBackground').fadeOut(200); 
}); 

這將一切發生在相同的功能，所以無論你叫它，做這一切在一起。

要了解更多有關遞延（）：http://api.jquery.com/category/deferred-object/

Answer 2

那麼它在我看來，你處理與該操作相關的異步性質的計時問題。我會建議射擊你的$ j（'＃modalBackground'）。show（）;命令一次並且只褪色一次。所以基本上，你會想要做更多的東西一樣：

$j('li.active').each(function(index){ 
      if(index===0) { 
       $j('#modalBackground').show(); 
      } 
      var theLink = $j(this).find('.shopthislookpageselect').val(); 
      var successString = "was added to your shopping cart." 
      $j.ajax({ 
       type:"POST", 
       url: theLink, 
       success: function(data){ 
        var returnPage = data; 
        var exists = (returnPage.indexOf(successString) !== -1); 
        if (exists) {$j('.col-main').prepend('<ul class="messages"><li class="success-msg"><ul><li><span>The items selected were added to your shopping cart. View your cart <a href="https://www.culturekings.com.au/checkout/cart/">HERE</a></span></li></ul></li></ul>'); $j("html, body").animate({ scrollTop: 0 }, "slow"); } 
        else {alert ('There was a problem adding these products to your cart. \n Please select the View Full Product Info link to add these items individually.')} 
        }, 
       error: function(){alert('There was a problem adding these products to your cart. \n Please select the View Full Product Info link to add these items individually.');}, 
       complete: function(){ 
        if(index===($j('li.active').length-1)) { 
         $j('#modalBackground').fadeOut(200); 
        } 
       } 
      }); 
}); 

此代碼將避免不必要的顯示和隱藏衝突的對方，這是我想象就在眼前的問題。

請記住，beforeSend將在完成事件後立即觸發，而complete根據響應的等待時間具有任意的觸發時間。