Wait for ajax requests in array to be completed - ajax

Question

I'm trying to iterate through the ID's (containing an URL) of checked checkboxes. With each checkbox, it generates an AJAX-get which does a certain action on the database. This is working, however not all AJAX-gets seem to be executed (the redirect gets executed too fast).
As adviced, I've tried to make use of '$.when.apply', however, this doesn't seem to be working. I get a 'missing ) after argument list', most certainly generated in the part where I'm pushing the ajax-get.
Is this the right way or should I try another method?
$("#marksolved").click(function () {
var ajaxrequests = [];
// Loop through checkboxes.
$('input:checked').each(function () {
// Each id of a checkbox contains an URL.
var markurl = $(this).attr('id');
// Do the request.
ajaxrequests.push($.ajax({
method: 'GET',
url: markurl,
cache: false
});
});
// Check if all requests have completed.
$.when.apply($, ajaxrequests).then(function () {
// All requests have completed. An ajax-redirect will eventually take place too fast...
alert('All actions done!');
});
});

Answer 1

I get a 'missing ) after argument list', most certainly generated in the part where I'm pushing the ajax-get.
ajaxrequests.push($.ajax({
method: 'GET',
url: markurl,
cache: false
});
should be:
ajaxrequests.push($.ajax({
method: 'GET',
url: markurl,
cache: false
}));
It's missing a ), like the error says.
Side note: It would probably be far more efficient to combine all of your requests into one batch request instead of having one request for each checkbox.

Answer 2

You can use $.ajaxStop() to have an event raised when all ajax requests have ended, or $.ajaxComplete() for when all requests have completed.

Answer 3

try setting the ajax async option to false
$.ajax({
method:'GET',
url: markurl,
cache:false,
async: false
});

Answer 4

If you know how many ajax requests you are making, you could do something like this:
var ajax_count = 0;
var ajax_checker;
var ajax_n = 3;
$('input:checked').each(function() {
...
ajaxrequests.push($.ajax({
method:'GET',
url: markurl,
cache: false,
success: function(){ ajax_count++; }
});
}
// Check if all requests have completed.
function ajax_complete() {
if (ajax_count >= ajax_n) {
clearInterval(ajax_checker);
//continue working
alert('All actions done!');
}
}
ajax_checker = setInterval(function() {ajax_complete();}, 50);