Question

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 recommended by jQuery. But then how can I know when these 3 calls are finished and take action depending on result?

Answer 1

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.