Tengo una app en la que tengo una tabla con varias filas (unas 100). Para cada una de ellas necesito que se llame a una URL para registrar cierta información en un servidor externo. Cada llamada me devuelve si ha ido bien y un identificador necesario para la siguiente llamada. Es decir, las llamadas han de ser encadenadas (hasta que no tenga el resultado de la primera no puedo llamar a la segunda y así sucesivamente). Para ello, para no bloquear la app, desde un botón quiero que se abra una ventana modal en la que me indique el estado de cada llamada (por ejemplo, mostrar el ID de cada registro como el texto dentro de un span (id="item_x", siendo x el ID) y que pase de rojo a verde cuando termine su llamada).
Las llamadas secuenciales las estoy haciendo sin problemas con Ajax:
ajaxRequest: function (urls) {
if (urls.length > 0) {
$.ajax({ method: 'GET', url: urls.pop(), async:false })
.done(function (ok) {
if (ok) {
$('*[id*=item_]:visible.red').first().toggleClass('red green');
self.ajaxRequest(urls);
}
});
}
El problema es que el color no cambia secuencialmente sino que cambia todo a la vez. Aunque las llamadas son secuenciales y se llama a toggleClass antes de la siguiente llamada, el cambio no se ve hasta que acaba la última llamada. ¿Es algo que se debe a jQuery? ¿Conocen alguna forma de resolver el problema?
Muchas gracias.
async:false
ya estás bloqueando el hilo principal. El problema tampoco está explicado claramente. ¿Tienes una especie de tabla ya con sus filas y puedes actuar sobre cada fila de esa tabla haciendo click en alguna parte? ¿O lo que quieres es ir llenando cada fila de la tabla en cada llamada? Parece que es más simple de lo que parece, pero no lo has explicado claro. Agrega a la pregunta también el HTML con el que trabaja tu código.async:false
. En origen sí que lo tenía conasync:true
pero lo cambié con idea de esperar a la respuesta anterior para llamar a la siguiente.done
la segunda fila y así sucesivamente?