How can I run some code when a ajax call is complete in jquery?

Question

I have a div that contains some content. I want this div to be able to slide up and download some new content. When the content has been loaded via ajax, I want the div to slide down again and show the new content. I know how to handle each piece separately, but I do not know how to do them all at once. This is what I have:

$(element).slideUp('fast'); // slide up
$(element).slideDown('fast'); // slide down 
$(element).ajax(url); // download the text

Look at the [jQuery AJAX documentation](http://api.jquery.com/jQuery.ajax/): it is helpful in this scenario. — Waleed Khan, Sep 03 '12 at 03:56
[What have you tried?](http://whathaveyoutried.com) I **strongly** recommend reading the jQuery ajax API docs. — Matt Ball, Sep 03 '12 at 03:56
There's one thing called "callback" in the documentation. Read it up. — Fabrício Matté, Sep 03 '12 at 03:56
Actually the callback function is called `success` in the `$.ajax` documentation, but it's recommended to bind a `.done()` handler to the jqXHR object. — Fabrício Matté, Sep 03 '12 at 03:58

score 1 · Answer 1 · answered Sep 03 '12 at 03:58

1

$.ajax(url).done(function (response) {
  // your code
});

answered Sep 03 '12 at 03:58

Danil Speransky

29,891
5
68
79

`.success` is deprecated on jQuery 1.8 in favor of [`.done`](http://api.jquery.com/deferred.done/). – Fabrício Matté Sep 03 '12 at 04:00
thanks a lot you are realy helpfull – user1495129 Sep 03 '12 at 04:01
+1, worse than this are the deprecated shorthand form selectors, but we'll live (and include compat plugins when needed). `=]` – Fabrício Matté Sep 03 '12 at 04:02

score 1 · Accepted Answer · answered Sep 03 '12 at 04:00

You need to use the slideUp's callback and the success handler for your ajax as well. Your code would look something like this:

$(element).slideUp('fast', function() {
    $.get(url, data, function (result) {
        $(element).html(result);
        $(element).slideDown('fast');
    });
});

How can I run some code when a ajax call is complete in jquery?

2 Answers2