length - size jquery

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

Question

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 jquery ajax.

Entonces 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, 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.

Answer 1

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

Answer 2

¿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");
}
}

Answer 3

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 :

Función jQuery.active

Answer 4

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/