jQuery deferred object with nested ajax calls

Question

I have a situation in which my ajax calls must perform in a particular order. I have used jQuery Deferred objects in other situations, but cannot seem to find a way to make

Answer 1

It's actually quite simple. Though all the AJAX calls are Deferred objects, I still use one for the method itself.

function nestedAjax() {
    var dfd = $.Deferred();
    $.get("/echo/json/", function(){
        console.log("First ajax done.");
        $.get("/echo/json/", function(){
             console.log("Second ajax done.");
            dfd.resolve();
        });
    });

    return dfd.promise();
};

Answer 2

Couldn´t add a comment for some reason to the above answer.

So i add my comment here. The above answer will only work if the ajax calls are fast and returns BEFORE the return dfd.promise().

I have the same problem. And as you can see. The returned deferred object states that it is "pending": http://jsfiddle.net/BtEKa/

Answer 3

You don't actually need an extra deferred object. You can do what you want by chaining with then():

function nestedAjax() {
    return $.get("/echo/json/").then(function(result1){
        console.log("First ajax done.");
        if (result1) {
            return result1;
        } else {
            return $.get("/echo/json/").then(function(nestedResult){
                console.log("Second ajax done.");
                return nestedResult;
            });
        }
    });
};

I added some logic since I think that's probably the reason you are executing this synchronously. After that you can use the result in $.when like so:

$.when(nestedAjax(), $.get("/something/else")).then(function(nested, other) {
    console.log("Complete.", nested, other);
});