Cómo saber cuándo se completan todas las llamadas ajax

Tengo una página de estilo de tabla con filas. Cada fila tiene una checkbox. Puedo seleccionar todas / muchas casillas de verificación y hacer clic en “enviar” y lo que hace es una llamada Jquery ajax para cada fila.

Básicamente tengo un formulario para cada fila e itero sobre todas las filas marcadas y envío ese formulario que hace la llamada jquery ajax.

Entonces tengo un botón que hace:

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

Entonces cada fila tiene:

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

Este formulario se envía a 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"); } }); } 

Lo que quería saber es, a partir de esto, hay una manera en que puedo decir si todas mis llamadas a Ajax están completas. La razón es que desea habilitar / deshabilitar el botón de enviar mientras se realizan todas estas llamadas.

Gracias y tenga en cuenta que tuve que modificar mis nombres de variable debido a la sensibilidad de la aplicación, por lo que muchos de ellos pueden duplicarse.

La manera fácil

La forma más fácil es usar el controlador de eventos .ajaxStop() :

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

El camino difícil

También puede detectar manualmente si alguna llamada ajax aún está activa:

Crea una variable que contenga el número de conexiones Ajax activas:

 var activeAjaxConnections = 0; 

justo antes de abrir un nuevo incremento de conexión Ajax esa variable

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

en la parte success compruebe si esa variable es igual a cero (de ser así, la última conexión ha finalizado)

 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 } } 

Como puede ver, he agregado también verificar la devolución con error

Una buena solución sería usar;

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

Para obtener más información, consulte la función jQuery .ajaxStop en http://api.jquery.com/ajaxStop/

Tal vez:

 jQuery.active == 0 

Robado de:

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

Más información sobre StackOverflow:

Función jQuery.active

¿Qué tal si simplemente utilizas if ?

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