JQuery.when understanding

Question

I am trying to use jQuery.when to run two ajax requests and then call some function after two requests have completed. Here is my code:

 var count = 0; var dfr; var showData = function(data) { dfr.resolve(); alert(count); // Do something with my data data received }; var method1 = function() { dfr = $.Deferred(); return $.ajax('localhost/MyDataService/DataMethod_ReturnsData', { dataType: "jsonp", jsonp: "$callback", success: showData }); }; var method2 = function() { return $.ajax('localhost/MyDataService/DataMethod_ReturnsCount', { dataType: "jsonp", jsonp: "$callback", success: function(data) { count = data.d.__count; } }); }; $.when(method1(), method2()) .then(showData()); 

However, this does not work properly. An Ajax call in method1 will return the data that will be used in showData() , and an Ajax call in method2 will return the account that should be assigned to the var account, and then used in showData() .

But when I run the above code, method1 is method1 , then method2 , and then showData leaving the data in showData as 'undefined' . How can I achieve this with $.when , which, as far as I know, is only executed when both functions returning $.promise . I want both ajax calls to be called in parallel, and subsequent results are displayed based on the results of both calls.

Answer 1

 function showData(data1, data2) { alert(data1[0].max_id); alert(data2[0].max_id); } function method1() { return $.ajax("http://search.twitter.com/search.json", { data: { q: 'ashishnjain' }, dataType: 'jsonp' }); } function method2() { return $.ajax("http://search.twitter.com/search.json", { data: { q: 'ashishnjain' }, dataType: 'jsonp' }); } $.when(method1(), method2()).then(showData);​ 

JsFiddle works here

Answer 2

The problem is that you are passing showData() to then() , not showData . You must pass a link to the .then() function:

 $.when(method1(), method2()) .then(showData); 

or

 $.when(method1(), method2()) .then(function () { showData(); }); 

Edit

I put together a working demo . Part of the problem (at least in the code snippet you posted) was that there was no callback function named $callback . Part of the problem was $ in the callback name '$callback' .

So, remove the jsonp: '$callback' ajax parameter, so jQuery uses the callback function called callback by default, and , defines a function with that name, and it all works.

Answer 3

I modified your code a bit and made it easier to understand ... I have not tested it, try

 var count = 0; function countResponse(data) { count++; if(count==2) { // Do something after getting responce from both ajax request } }; var method1 = function() { return $.ajax('localhost/MyDataService/DataMethod_ReturnsData', { dataType: "jsonp", jsonp: "$callback", success: function(data) { countResponse(data) } }); }; var method2 = function() { return $.ajax('localhost/MyDataService/DataMethod_ReturnsCount', { dataType: "jsonp", jsonp: "$callback", success: function(data) { countResponse(data) } }); };