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

Tengo una página de estilo de tabla con filas. Cada fila tiene una casilla de verificación. 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 ajax de jquery.

, Así que tengo un botón que hace:

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

Entonces cada fila tiene: 

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

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, desde esta es una manera de saber si todas mis llamadas Ajax están completas. La razón es que desea habilitar / deshabilitar el botón enviar mientras se realizan todas estas llamadas.

Gracias y tenga en cuenta que tuve que destrozar mis nombres de variables debido a la sensibilidad de la aplicación, por lo que muchos de ellos pueden ser duplicados.

 68
jqueryajax
Author: PhD, 2008-11-13
Source

4 answers

El camino fácil

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

$(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 sigue activa:

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

var activeAjaxConnections = 0;

Justo antes de abrir una nueva conexión Ajax incrementa esa variable 

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

En success parte compruebe si esa variable es igual a cero (si es así, la última conexión ha terminado) 

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

As se puede ver, he añadido también la comprobación de retorno con error

 118
Author: Tomasz Tybulewicz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-28 13:32:10

Una solución ordenada sería usar; 

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

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

 22
Author: Tebo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-09-30 13:06:53
 13
Author: nothing-special-here,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:02:56

¿Qué tal simplemente usar si?

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

          }
   }
 -2
Author: jarda,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-25 14:10:19