A chain of multiple ajax calls with jquery pending objects

Question

When looking for a solution similar to the one described here: How to bind ajax calls using jquery I'm looking for a solution using jquery v1.52.

I have a set of ajax requests. But every ajax request should only be sent after the previous ajax call has completed. I am trying to achieve this with jquery 1.5.2, but just can't. Here is what I changed from the above example. This does not work. Can someone help me get this job? Expected Result: http://jsfiddle.net/k8aUj/3/

PS: I can not upgrade to version 1.5.2

Answer 1

Yo! Solved! http://jsfiddle.net/sandhyasriraj/AaHZv/

var x = null; var i = 0; x= $.Deferred(); var countries=["US","CA","MX","bx","fs","ZX"]; function log(msg) { var $out=$("<div />"); $out.html(msg); $("#console").append($out); } callX = function(j) { return $.ajax({ type: "GET", url: "/echo/json/", data: {country:countries[i]}, dataType: "JSON", success: function(){ log("Successful request for [" + countries[j] + "]"); i++; x.resolve(); xy(); } }); } x.resolve(); xy = function() { debugger; if(i > 5) return; $.when(x).then(function() { x = $.Deferred(); log("Making request for [" + countries[i] + "]"); callX(i); }); } xy(); 

Is this what you want?