jQuery Deferred not working

Question

I am trying out a code as

function search(query) {
    var dfr = $.Deferred();
    $.ajax({
        url: "http://search.twitter.com/search.json",
        data: {
            q: query
        },
        dataType: 'jsonp',
        success: dfr.resolve
    });
    return dfr.promise();
}

Test = {
    start: function(){
        alert("Starting");
    }
};

function gotresults(data) {
    alert(data.max_id);
}

function showDiv() {
    $('<div />').html("Results received").appendTo('body');
}

$.when(search('ashishnjain'))
    .then(gotresults)
    .then(showDiv);

This works as expected. However when I write it as:

Test.start()
    .then(search('ashishnjain'))
    .then(gotresults)
    .then(showDiv);

it just alerts "Starting" and terminates.A working example can be found at http://jsfiddle.net/XQFyq/2/. What am I doing wrong?

Solution

Test is not a deferred object, so it does not have a method .then(). .when() IS a deferred object hence why it works when you call .when().

Your $.ajax() call IS a deferred object, so if you return that as part of your 'Test.start() method, you can add .then() callbacks (see example here), the .then() callbacks will be called once the ajax call has been resolved, i.e. has returned its data, however this isn't really the correct use of the deferred object I don't think. The following is more how it is intended to be used I believe:

function searchTwitter(query){
    $.ajax({
            url: "http://search.twitter.com/search.json",
            data: {
                q: query
            },
            dataType: 'jsonp',
            success: function(data){return data;}
        })
        .then(gotresults)
        .then(showDiv)
        .fail(showFailDiv);
};

function gotresults(data) {
    alert(data.max_id);
}

function showDiv() {
    $('<div />').html("Results received").appendTo('body');
}

function showFailDiv() {
    $('<div />').html("Results <b>NOT</b> received").appendTo('body');
}

// Starting can be done with a click:

$("#searchTwitter").click(function(){
   searchTwitter($("#searchName").val()); 
});

// OR a static call:
searchTwitter("ashishnjain");

See it working here

If you want the returned data in for example showDiv() change it to showDiv(data).....

---

Here is another example of how you could create your own deferred object instead of relying on the deferred object of the .ajax() call. This is a little closer to your original example - if you want to see it fail for example, change the url to http://DONTsearch.twitter.com/search.json example here:

var dfr;

function search(query) {
    $.ajax({
        url: "http://search.twitter.com/search.json",
        data: {
            q: query
        },
        dataType: 'jsonp',
        success: function(data){dfr.resolve(data);},
        error:  function(){dfr.reject();}
    });
}

Test = {
    start: function(){
        dfr = $.Deferred();
        alert("Starting");
        return dfr.promise();        
    }
};


function gotresults(data) {
    alert(data.max_id);
}

function showDiv() {
    $('<div />').html("Results received").appendTo('body');
}

function showFailDiv() {
    $('<div />').html("Results <b>NOT</b> received").appendTo('body');
}

Test.start()
    .then(search('ashishnjain'))
    .then(gotresults)
    .then(showDiv)
    .fail(showFailDiv);

---

Update to answer the comments:

In your version 11, you are not telling the deferred object of a failure, so it will never call the .fail() callback. To rectify this, use the ajax interpretation if the .fail() (error:.......) to advise the deferred object of a failure error: drf.reject - this will run the .fail() callback.

As for the reason you are seeing ShowMoreCode() run straight away is, the .then() calls are callbacks, if you pass it a string representation of a function like: .then(ShowDiv) once its turn comes the callback will look for a function with that name. If you pass a call to a function .then(someMoreCode('Ashish')) it will run the function. Try it, change .then(showDiv) to .then(showDiv()) you will notice as soon as the code runs, it will show the code from showDiv().

If you change .then(ShowMoreCode('Ashish')) to .then(ShowMoreCode), you can access the returned data from the $.ajax() call. Like this:

function someMoreCode(name) {
    alert('Hello ' + name.query);
}

Take a look here: working and NOT working .fail()

Comments

[pimvdb]

start() doesn't return anything so you can't use chaining here I guess.

[Ashish]

Well even putting search in test and starting from search is not helping.

[kirilloid]

Test just doesn't have corresponding methods. have you looked at firebug/webinspector?

[Ashish]

Thanks or a detailed response. However after trying the above code, I see that the failed is still never called. I even changed the url to DONTsearch.twitter.com/search.json but no luck. One more thing I noticed in this code jsfiddle.net/ashishnjain/XQFyq/11 was that, the function someMoreCode is called even before the search code. Can't we chain someMoreCode to execute after all code is complete?

[Scoobler]

See the update to the answer which hopefully helps with your code.

[Ashish]

Thanks again for the detailed explanation. However, your updated response means that we cannot hook up custom functions with custom values that are not related to the ajax call to the chain. someMoreCode('Ashish') was just an example. Actually I have to show another div in my code upon response of ajax call. Say if I get a records in response, i show the div or else I show custom statement of 'No records exists'. But ultimately, the someMoreCode should be executed the last. Is there a way we can hook custom parameters to ajax call which can be accessed from someMoreCode as you said name.query?

[Scoobler]

When you call dfr.resolve, without brackets, its a callback - and thus the data which the ajax call returns will be avalibe to you callback functions - so in the example in one function, you access the data by calling gotResults(data) - the data is now avalible within gotResults as var data. If you call someMoreCode(name) - the data is now avalible to the function as var name - it is the SAME data. As this is an ajax response, you could do someMoreCode(data, status) - status, should be a string saying success.

[Scoobler]

NOW, if you want to add a specific function call to a callback. You can pass it as a function wrapping a call to a function....so instead of .then(someMoreCode('Ashish')) as we know this doesn't work, you could wrap it like this: .then(function(){someMoreCode('Ashish')}). See it working here. I have included a couple of extra functions to hopefully show how you can move data round in different ways between the deferred object and the callbacks.