Waiting for all AJAX call than show dialog box

Question

I am working on a dynamic online form website. In the main form, I have multiple sub-forms which can be added and deleted dynamically.

<div class='subform'>
    //form fields 
    <input ...>
    ...
    <button class='subform_submit'>
</div>

For each subform, I bind an AJAX call on the subform's submit button like this:

$('#main').on('click', '.subform_submit', function(){
    // Get this subform's user input
    ...
    $.ajax({
        url: ..,
        type: ..,
        data: /* this subform's data */
    });
});

So in that page, I may have 0 to 10 subforms depending on the user's selection. I also have a main submit button on the bottom of the page, which can submit those subforms and the main form's data together.

$('#main').on('click', '#submit', function(e){
    $('.subform_submit').click(); // Submit each subform
    bootbox.confirm({ });
})

Once main submit button is clicked, I want to show a loading picture and then show a dialog box (I use bootbox.confirm() here) until all AJAX calls have completed. This dialog box is telling user that whole form including sub-forms has been submitted. But the problem is that each AJAX call may take 2 seconds to complete and I don't know how may calls may be pending completion. How can I write this main submit button so that it will:

1. Show the loading image immediately, and
2. Hide the loading image and show the dialog box after all AJAX calls have completed?

Answer 1

Keep track of how many sub-forms there are;

$subFormsCount = $('.subform').length;

Keep track of how many forms have been submitted;

$submittedForms = 0;

Each time a form finishes submitting, add to the $submittedForms;

$.ajax({
  ..
  ..
  done: function(){
    $submittedForms++;
  }
})

Create a global timer to see if the number of submitted forms matches the total number of subforms. If true, hide the dialog box;

setInterval(function(){
  if($submittedForms == $subFormsCount){
   $('.dialog').show();
  }
}, 50ms)

Edit

You could skip the global timer (as this will probably be a few milliseconds out) - include the check in your ajax.done instead;

$.ajax({
  ..
  ..
  done: function(){
    $submittedForms++;

    if($submittedForms == $subFormsCount){
     $('.dialog').show();
    }
  }
})