jQuery ajax asyncrhonous calling

Question

I'm trying to make some actions after an ajax call done with jquery.

I have seen that if i use a function like this:

    function DownloadData() {
        $.ajax({
            url: "/api/AlbumsRest",
            accepts: "application/json",
            cache: false,
            success: function () {
                /*binding stuff*/
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert('Error' + textStatus);
            }
        });
    }

The ajax request it's done in async mode. I don't want to change it because i don't want to freeze the page. But i would like to make some actions (animations, effects etc) after this ajax is completed.

So, my question is, how can i to know if i'm at the end of this request without using the success event

If i call DownloadData function like this:

    function DownloadNextData() {
        DownloadData();
        SlideOutAnimation();
        SlideInAnimation();
    }

I need to make slides after async request has been made.

Some idea ?

@SridharNarasimhan `complete` is done for both success and failure (and is also deprecated) — Alnitak, Dec 06 '12 at 18:27
@eveevans "success" callbacks are the old crappy way of doing this - Deferred objects and `.done` are far more powerful. — Alnitak, Dec 06 '12 at 18:34
@eveevans see here for relevant details: http://stackoverflow.com/questions/5436327/jquery-deferreds-and-promises-then-vs-done — Eran Medan, Dec 06 '12 at 18:36
Thanks for your help. I have tried with .done and this works for me — Pablo Rodríguez, Dec 06 '12 at 18:41

Alnitak · Answer 1 · 2012-12-06T19:00:41.470

Using jQuery Deferred Objects you should return the result of $.ajax() from DownloadData

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

and then you can register a function outside of your AJAX handler that'll only get called once the AJAX call has completed:

function DownloadNextData() {
    DownloadData().done(function() {
        SlideOutAnimation();
        SlideInAnimation();
    });
}

behold - your animation processing is completely decoupled from your AJAX function :)

To simplify things, .done can also actually take a list of function references:

function DownloadNextData() {
    DownloadData().done(SlideOutAnimation, SlideInAnimation);
}

Note that in this case you can't supply your own function arguments - they'll actually get passed the contents of the AJAX data.

adeneo · Answer 2 · 2012-12-06T18:33:19.467

2

function DownloadData() {
    return $.ajax({
        url: "/api/AlbumsRest",
        accepts: "application/json"
    });
}

function DownloadNextData() {
    SlideOutAnimation();
    SlideInAnimation();
}

DownloadData().done(DownloadNextData);

edited Dec 06 '12 at 18:33

answered Dec 06 '12 at 18:28

adeneo

312,895
29
395
388

Why did you leave `DownloadData` inside `DownloadNextData`? – Alnitak Dec 06 '12 at 18:30
@Alnitak - I assumed from the code in the question it just calls the ajax function once more, but I could be mistaken? Actually I think I get it now, and I'll remove it! – adeneo Dec 06 '12 at 18:32

score -1 · Answer 3 · answered Dec 06 '12 at 18:29

-1

Try $.ajaxcomplete. here is the documentation for it http://api.jquery.com/ajaxComplete/

answered Dec 06 '12 at 18:29

Jinal Shah

325
3
15

jQuery ajax asyncrhonous calling

3 Answers3