how to wait for an ajax call to return

Question

I\'m trying to use JQuery although i\'m struggling to successfully wait for a ajax call to succeed before executing further code. Is there a way to wait for an ajax to call

Answer 1

You have to insert your code in the 'success' function: http://api.jquery.com/jQuery.ajax/

Answer 2

jQuery's ajax methods have a success handler.

You should put your code that you want to fire on success in a method attached to this handler.

Consider the example given on the jQuery website:

$.ajax({
  url: "test.html",
  context: document.body,
  success: function(){
    $(this).addClass("done");
  }
});

You can see here that there's a success handler with a method attached. This method will execute when the ajax method returns succesfully.

As has been pointed out in other answers and the comment below, you can now use deferreds instead of this simple success handeler. This allows you to attach multiple actions to each given event.

Answer 3

Yes, you can do request synchronously:

var bodyContent = $.ajax({
      url: "script.php",
      global: false,
      type: "POST",
      data: {id : this.getAttribute('id')},
      dataType: "html",
      async:false,
      success: function(msg){
         alert(msg);
      }
   }
).responseText;

Source: http://api.jquery.com/jQuery.ajax/

However, synchronous requests are a step backwards, as the JS engine (and, in some browsers, the user interface) will block until the request completes. Douglas Crockford once wrote about synchronous requests:

Synchronous programming is disrespectful and should not be employed in applications which are used by people.

Answer 4

1. Use async: false
2. or use a callback function

Answer 5

Have a look at jQuery deferreds. You can't halt this, but you can call other code after an AJAX call returns.

// No way to stop.
$.ajax(...);
doSomething();

But with deferds you can:

$.ajax(...).success(function() {
   doSomething();
});

See this article.

http://www.erichynds.com/jquery/using-deferreds-in-jquery/

Answer 6

You can use success or complete callbacks. Success fires if the server returns a 200. Complete will fire when the request is finished, regardless of the response status.

$.ajax({
    url: "/path/to/action",
    success: function() {
        alert("do something if it's successful");
    },
    complete: function(request, status) {
        alert("do something when it's finished, regardless of success.");
    }
});

or you can do a synchronous call:

$.ajax({
    url: "/path/to/action",
    async: false
});