Question

I am using the jQuery UI tabs where each tab has a different form on it. After the user enters various pieces of data, they submit the entire set of tabs so that each tab posts to the server asynchronously. This works well, and I have no problems here.

However, where I run into a problem is that, the last form that I post has to happen AFTER all the other posts complete. General idea is like this:

postForm(0, "#Form1");
postForm(1, "#Form2");
postForm(2, "#Form3");
postForm(3, "#Form4");
$.post('Project/SaveProject', function (data) {
    $('<div class="save-alert">The current project has been saved.</div>')
    .insertAfter($('#tabs'))
    .fadeIn('slow')
    .animate({ opacity: 1.0 }, 3000)
    .fadeOut('slow', function () {
        $(this).remove();
    });
});

The postForm function does a little bit of processing and then makes an AJAX $.post call. The last $.post performed here (to ‘Project/SaveProject’) must wait until those other posts are completed. What is the best way to go about doing that?

Answer 1

You can just use the .ajaxStop() event that fires when all the other AJAX POSTs finish, assuming you’re doing no other AJAX work then, like this:

postForm(0, "#Form1");
postForm(1, "#Form2");
postForm(2, "#Form3");
postForm(3, "#Form4");
$(document).ajaxStop(function() {
  $.post('Project/SaveProject', function (data) {
    $('<div class="save-alert">The current project has been saved.</div>')
    .insertAfter($('#tabs'))
    .fadeIn('slow')
    .animate({ opacity: 1.0 }, 3000)
    .fadeOut('slow', function () {
      $(this).remove();
    });
  });
  $(this).unbind('ajaxStop');
});

.ajaxStop() fires when all AJAX requests that are running complete, so it’ll only fires when all of those POSTs have returned, jQuery keeps a count internally ($.active, $.ajax.active in jQuery 1.5) to determind how many simultaneous AJAX requests are outstanding…when it gets back to 0 this event fires.

This approach lets you do the other form submissions simultaneously, and do the final form ASAP after.