¿Cómo saber cuando todas las llamadas ajax están completos

Question

que tienen 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 tienen una forma para cada fila y yo iterar sobre todas las filas controladas y presentar esa forma que lo hace la llamada jQuery Ajax.

Así que tienen un botón que hace:

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

A continuación, 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> 

Esta forma se somete 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 , de esto hay una forma 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 tenía que destrozar mis nombres de variables debido a la sensibilidad de la aplicación, por lo que muchos de ellos pueden ser duplicado.

Answer 1

La manera fácil

La forma más sencilla es utilizar el .ajaxStop() event handler:

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

El camino difícil

También puede detectar de forma manual si alguna llamada AJAX está todavía activo:

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

var activeAjaxConnections = 0; 

justo antes de la apertura de nuevo incremento conexión Ajax esa variable

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

en success cheque parte 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 
    } 
} 

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

Answer 2

Una buena solución sería usar;

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

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

Answer 3

Tal vez:

jQuery.active == 0 

robados de:

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

Más información en StackOverflow:

jQuery.active function

Answer 4

¿Qué hay de simplemente utilizar si?

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

      } 
    }