I have a settings page on my jQuery mobile website When user clicks save button, I update the server for 3 different user inputs i.e language, currency, threshold

In order to do this I make 3 separate ajax calls (with PUT). So when all are succesfull I go to another page if any of those fails I stay on the same page and show the error messages.

The problem is I only want to switch the page if all calls are succesful, and if there are any errors I want to show one alert with all messages (rather than 3 separete alert windows), so I need to wait the results of all these calls.

To achive this in all 3 Ajax calls I used;

async:false 

And I put a boolean in all these calls succes methods like;

     success: function (data){
           languageUpatesuccesful=true;

        }

and then something like this;

 if(languageUpatesuccesful){
   make the next call to update currency..etc
}

...

if(allsuccesful(){
  changepage();
}

So I can track when exactly when one calls finishes then I make the next call, if all succesful switch to another page.

While this works, I think this is a horrible solution, is there a way to achive this by using async:true ?

Because disabling asynchrous ajac freezes the page and I cant even show animations, also it is not remended by jQuery. But then how can I know when these 3 calls are finished and take action depending on result?

I have a settings page on my jQuery mobile website When user clicks save button, I update the server for 3 different user inputs i.e language, currency, threshold

In order to do this I make 3 separate ajax calls (with PUT). So when all are succesfull I go to another page if any of those fails I stay on the same page and show the error messages.

The problem is I only want to switch the page if all calls are succesful, and if there are any errors I want to show one alert with all messages (rather than 3 separete alert windows), so I need to wait the results of all these calls.

To achive this in all 3 Ajax calls I used;

async:false 

And I put a boolean in all these calls succes methods like;

     success: function (data){
           languageUpatesuccesful=true;

        }

and then something like this;

 if(languageUpatesuccesful){
   make the next call to update currency..etc
}

...

if(allsuccesful(){
  changepage();
}

So I can track when exactly when one calls finishes then I make the next call, if all succesful switch to another page.

While this works, I think this is a horrible solution, is there a way to achive this by using async:true ?

Because disabling asynchrous ajac freezes the page and I cant even show animations, also it is not remended by jQuery. But then how can I know when these 3 calls are finished and take action depending on result?

• javascript
• jquery
• ajax
• jquery-mobile

• 2 Why not send all of your data with just one AJAX call? – marekful Commented Jan 29, 2013 at 15:54
• @Marcell Fülöp how? web service have 3 different update methods – Spring Commented Jan 29, 2013 at 15:55
• Send them all in one ajax, and don't use async: false. There is always a better way to do it than to use async: false. Turning off async sets you up for failure with the UI. – Jonathan M Commented Jan 29, 2013 at 15:55
• There are different ways to know when all of your multiple AJAX calls returned. The simpler way is to use a timer based check mechanism. Each of you success callbacks could set some variables which are examined in the timer based function. Another way is to implement your own event/listener model. – marekful Commented Jan 29, 2013 at 15:56
• @Jonathan M how can i use only one ajax? while there 3 different update web service URLS? – Spring Commented Jan 29, 2013 at 15:56

3 Answers 3

Use deferred objects together with $.when:

$.when(ajax1(), ajax2(), ajax3()).done(function() {
    // all Ajax calls successful, yay! 
}).fail(function() {
    // oh noes, at least one call failed!
});

Where ajaxX is defined as:

function ajax1() {
    return $.ajax(...);
}

If you indeed want to chain the Ajax calls instead of having them concurrent, have a look at Bergi's solution.

You can easily chain them by using the Deferred interface:

$.ajax({…})
  .then(function(languageUpateResult) {
     return $.ajax({…});
  })
  .then(function(currencyUpdateResult) {
     return $.ajax({…});
  })
  .then(function(thresholdUpdateResult) {
     changePage();
  });

Sorry, I skipped the fact that the ajax calls are separate. The above code executes them sequentially, if you just want to execute them in parallel and wait for all of them to finish use $.when() - see @FelixKling's answer.

You can try using web workers to do your async calls in a background thread. Web workers have pretty good browser support and should solve your issue. If you are interested, I have written a little abstraction of the web worker library to make them easier to work with (just send me a pm).