Cách biết khi nào tất cả cuộc gọi ajax hoàn tất

Question

Tôi có một trang kiểu bảng có các hàng. Mỗi hàng có một hộp kiểm. Tôi có thể chọn tất cả/nhiều hộp kiểm và nhấp vào "gửi" và những gì là một cuộc gọi Jquery ajax cho mỗi hàng.

Về cơ bản tôi có biểu mẫu cho mỗi hàng và tôi lặp lại tất cả các hàng đã chọn và gửi biểu mẫu đó thực hiện cuộc gọi jquery ajax.

Vì vậy, tôi có một nút có quyền này:

 $("input:checked").parent("form").submit(); 

Sau đó, mỗi hàng có:

  <form name="MyForm<%=i%>" action="javascript:processRow(<%=i%>)" method="post" style="margin:0px;"> 
       <input type="checkbox" name="X" value="XChecked"/> 
       <input type="hidden" id="XNumber<%=i%>" name="X<%=i%>" value="<%=XNumber%>"/> 
       <input type="hidden" id="XId<%=i%>" name="XId<%=i%>" value="<%=XNumber%>"/> 
       <input type="hidden" id="XAmt<%=i%>" name="XAmt<%=i%>" value="<%=XAmount%>"/> 
       <input type="hidden" name="X" value="rXChecked"/> 
      </form> 

Hình thức này nộp để processRow:

function processRow(rowNum) 
    { 
     var Amount = $('#XAmt'+rowNum).val(); 
     var XId = $('#XId'+rowNum).val(); 
     var XNum = $('#OrderNumber'+rowNum).val(); 
     var queryString = "xAmt=" + "1.00" + "&xNumber=" + OrdNum + "&xId=" + xId; 


     $('#coda_'+rowNum).removeClass("loader"); 
     $('#coda_'+rowNum).addClass("loading"); 


     $.ajax({ 
      url: "x.asp", 
      cache: false, 
      type: "POST", 
      data: queryString, 
      success: function(html){ 
      $('#result_'+rowNum).empty().append(html); 
      $('#coda_'+rowNum).removeClass("loading"); 
      $('#coda_'+rowNum).addClass("loader"); 
      } 
     }); 
    } 

Những gì tôi muốn biết là , từ đây là có một cách tôi có thể nói nếu tất cả các cuộc gọi Ajax của tôi đã hoàn tất. Lý do là muốn bật/tắt nút gửi trong khi tất cả các cuộc gọi này đang diễn ra.

Xin cảm ơn và xin lưu ý rằng tôi đã phải mangle tên biến do độ nhạy của ứng dụng, vì vậy nhiều người trong số họ có thể bị trùng lặp.

Answer 1

Cách dễ dàng

Cách đơn giản nhất là sử dụng .ajaxStop() event handler:

$(document).ajaxStop(function() { 
    // place code to be executed on completion of last outstanding ajax call here 
}); 

Cách cứng

Bạn cũng có thể tự phát hiện nếu bất kỳ cuộc gọi ajax vẫn còn hoạt động:

Tạo biến chứa số lượng kết nối Ajax đang hoạt động:

var activeAjaxConnections = 0; 

ngay trước khi mở increment kết nối Ajax mới mà biến

$.ajax({ 
    beforeSend: function(xhr) { 
    activeAjaxConnections++; 
    }, 
    url (...) 

trong success kiểm tra phần nếu biến đó bằng zero (nếu như vậy, kết nối cuối cùng đã kết thúc)

success: function(html){ 
    activeAjaxConnections--; 
    $('#result_'+rowNum).empty().append(html); 
    $('#coda_'+rowNum).removeClass("loading"); 
    $('#coda_'+rowNum).addClass("loader"); 
    if (0 == activeAjaxConnections) { 
    // this was the last Ajax connection, do the thing 
    } 
}, 
error: function(xhr, errDesc, exception) { 
    activeAjaxConnections--; 
    if (0 == activeAjaxConnections) { 
    // this was the last Ajax connection, do the thing 
    } 
} 

Như bạn có thể thấy, tôi đã thêm cũng kiểm tra trả lại có lỗi

Answer 2

Một giải pháp gọn gàng sẽ được sử dụng;

$("body").ajaxStop(function() { 
    //Your code 
}); 

Để biết thêm thông tin, hãy xem jQuery.ajaxStop chức năng tại http://api.jquery.com/ajaxStop/

Answer 3

Có thể:

jQuery.active == 0 

bị đánh cắp từ:

http://artsy.github.com/blog/2012/02/03/reliably-testing-asynchronous-ui-w-slash-rspec-and-capybara/

Thông tin thêm về StackOverflow:

jQuery.active function

Answer 4

Làm thế nào về chỉ đơn giản là sử dụng nếu?

success: function(html){ 
    if(html.success == true){ 
      $('#result_'+rowNum).empty().append(html); 
      $('#coda_'+rowNum).removeClass("loading"); 
      $('#coda_'+rowNum).addClass("loader"); 

      } 
    }