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? I've seen examples but it seems just to wait blindly for x amount of seconds?

Thanks, James

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? I've seen examples but it seems just to wait blindly for x amount of seconds?

Thanks, James

• javascript
• jquery
• html

• Can you show the code you're using? – m.edmondson Commented Sep 12, 2011 at 12:30
• Have you tried reading the docs? – TJHeuvel Commented Sep 12, 2011 at 12:30
• there is an event called success – Sascha Galley Commented Sep 12, 2011 at 12:31
• thank you for everyone's ments, really helpful!! Much appreciated, hope everyone has a great day – James Radford Commented Sep 12, 2011 at 22:57
• possible duplicate of How can I get jQuery to perform a synchronous, rather than asynchronous, AJAX request? – outis Commented Mar 10, 2012 at 16:02

6 Answers 6

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./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 pletes. Douglas Crockford once wrote about synchronous requests:

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

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./jquery/using-deferreds-in-jquery/

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

You can use success or plete 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");
    },
    plete: 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
});

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 ment below, you can now use deferreds instead of this simple success handeler. This allows you to attach multiple actions to each given event.

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