I have an ajax call inside a loop:
$.each(chunkedImages, function(index, image) {
$.ajax({
type: 'POST',
url: url,
data: {images: image, key: key},
}).success(function( data ) {
countConvertedImages += data;
if( index === chunkedImages.length-1 ) {
console.log( countConvertedImages );
}
});
});
My problem is that the "countConvertedImages" variable is not up to date. There is not the correct value inside, for some reason. I think it has to do with the order of the ajax calls because they might not be finished.
How can I output something after all ajax calls have finished?
Use $.when as mention below
$.when(
$.each(chunkedImages, function (index, image) {
$.ajax({
type: 'POST',
url: url,
data: { images: image, key: key },
success: function (data) {
countConvertedImages += data;
if (index === chunkedImages.length - 1) {
console.log(countConvertedImages);
}
}
})
})
).done(function () {
});
Thank you for the link: How do I return the response from an asynchronous call?
Which leads me to the right solution for me using .ajaxStop()
$(document).one("ajaxStop", function() {
...
});
was the way to go for me: https://api.jquery.com/ajaxStop/