Waiting for an AJAX call than show dialog

Question

I am working on a dynamic online website. In the main form, I have several subforms that can be added and removed dynamically.

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

For each subform, I associate an AJAX call on the submit button of the subform as follows:

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

So, on this page I can have from 0 to 10 subforms depending on the user's choice. I also have a main submit button at the bottom of the page that can transfer these subforms and the main form data together.

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

After clicking the main submit button, I want to show the boot image and then show the dialog box (I use bootbox.confirm() here) until all AJAX calls are completed. This dialog box informs the user that the entire form has been submitted, including subforms. But the problem is that each AJAX call can take 2 seconds, and I don’t know how the calls can be until completion. How can I write this main submit button so that it:

• Show downloadable image immediately and
• Hide downloadable image and display dialog box after all AJAX calls are completed?

Answer 1

Keep track of how many subforms exist;

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

Keep track of how many forms have been submitted;

 $submittedForms = 0; 

Each time the form finishes submitting, add to $ 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 can skip the global timer (since it will probably be a few milliseconds) - enable validation instead of ajax.done;

 $.ajax({ .. .. done: function(){ $submittedForms++; if($submittedForms == $subFormsCount){ $('.dialog').show(); } } }) 

Answer 2

You want to use . done () to specify the code that should wait for the completion of the asynchronous AJAX function.

  $.ajax({ url:.., type: .., data: /* this subform data*/ }) .done(function() { //Put code here }); 

Answer 3

Have you tried . AjaxStop () event handler ?

 $(document).ajaxStop(function() { // place code to be executed on completion of last outstanding ajax call here }); 

also check this answer

Answer 4

I assume that you have 9 subforms and 1 main form. The code for 8 subforms will be the same.

I am using async: false: it means the next ajax will not be called until the first is complete.

Code example:

 var id = 5; $.ajax({ url: , type: 'POST', data: {'id':id}, dataType: 'JSON', async: false, error : function(xhr, textStatus, errorThrown) { alert('An error occurred!'); }, success : function(response){ } }); 

Just set the variable in your last subform, which is the 9th subform.

 success : function(response){ var counter = true; } if(counter){ /* Code to show dialog.*/ } 

Answer 5

You can use $.when to wait for each request to complete. Something like this should shut you down. Basically you want to save all ajax requests in an array and pass this to when as arguments.

 $('#main').on('click', '.subform_submit', function () { var formRequests = $('.subform').map(function () { var $form = $(this); return $.ajax({ url: '', data: $form.serialzeArray() }); }).get(); $.when.apply(undefined, formRequests).done(function () { console.log('All done!'); }); }); 

Here comes a very similar little demo that I just compiled: https://jsfiddle.net/g9a06y4t/