jQuery AJAX solution inside each() loop

Question

I have noticed that I\'m having problems when I\'m using AJAX in jQuery inside a .each() loop. Only the first record in my database are being updated when the script execute

Answer 1

Your issue is in this block of code:

request.done(function(){
    document.location.reload();
});

Since the actions are asynchronous, this line is being executed before the save is completing, thus after the first save does complete, it executes the done logic.

You need to create an array of deferred objects that you can then wait until they are all executed before proceeding forward with your logic using the jQuery .when()/.then() functions.

Here is a previous StackOverflow question that details how to setup this situation. Please read the accepted answer of jQuery when each is completede trigger function.