Question

My question is a variant of the question here

However, there are two differences:

1. I don’t know how many AJAX requests there are. For sure, there are at least 10. They run concurrently, or almost concurrently, and the number of requests changes every time.

2. The function that I want to call makes AJAX requests as well. I don’t want the AJAX requests to go on forever (which is what happened when I first tried). I only want this functionality one time.

Here is my code:

$("#calculateButton").ajaxComplete(function() {
    $(this).unbind();
    $(this).click();
});

So what I tried to do is attach the ajaxComplete callback to the calculate button. The problem is that this executes every time an ajax request finishes. Whereas what I want is for the function to execute when all AJAX requests are complete.

Is there any way to do this. When I write it out, it sounds convoluted. Should I just give up and create a hacky work-around?

Answer 1

Use .ajaxStop() instead of your current method.

$("#calculateButton").ajaxStop(function() {
    $(this).unbind(); // $(this).unbind("ajaxStop") -> this is not needed as unbind will remove everything, but leaving it here as an FYI
    $(this).click();
});

http://api.jquery.com/ajaxStop/

Note: Updated code above to stop infinite loop.