2
 $.ajax({
        url: "",
        jsonpCallback: 'item',
        contentType: "application/json",
        dataType: 'jsonp',

        success: function(data) {
            console.log(data);
            var markup = "";
            $.each(data.list, function(i, elem) {
                dbInsert(elem['itemCode'], elem['description'], elem['price']);
            });

        },
        error: function(request, error) {
            alert(error);
        }
    });

I have the above type of different ajax calls with different urls. How can I run each Ajax call, one after another?

BlackVegetable
  • 12,594
  • 8
  • 50
  • 82
user2889058
  • 135
  • 4
  • 14
  • Call the other function inside the `success` function of the first ajax call and so on.. – asprin Nov 18 '13 at 15:18
  • 1
    Do you want the success function to run for each ajax call or after all calls are over? – Shreyas Nov 18 '13 at 15:19
  • after call calls over i need to print it all the values – user2889058 Nov 18 '13 at 15:20
  • Adding this as a comment because you certainly do not *need* a vendor lib to solve this problem, but there are many control flow libraries that do this sort of thing quite elegantly. [async](https://github.com/caolan/async) is a great example, providing many different ways of running serial or parallel async operations. Then of course, jQuery has promises built in which you could use for control flow. – numbers1311407 Nov 18 '13 at 15:26
  • @user2889058 - I've added a variation of the solution to store all the results and print them all at the end. – Ian Nov 18 '13 at 16:06

2 Answers2

2

Keep track of the urls still to send, and have the success inline function of one ajax request go and call the next.

var urls = [...];
var runNextAjax = function() {
    var url = urls.pop();
    $.ajax({
        url: url,
        ... other settings, as before ...
        success: function(data) {
           ... do what you want with the data ...
           if (urls.length > 0) runNextAjax();
        },
        error: function(req, err) {
           ... do what you want with the error ...
           if (urls.length > 0) runNextAjax();
        }
    });        
};
// Start the sequence off.
runNextAjax();

The above code acts on the data as it arrives, if you want to cache it all and act on it all at the end, store each result in an array, then process the array in a function that gets called at the end:

var dataAccumulator = [];
var displayAllData = function() {
    for (int i = 0; i < dataAccumulator.length; ++i) {
        var data = dataAccumulator[i];
        ... process the data into HTML as before ...
    }
};

var urls = [...];
var runNextAjax = function() {
    var url = urls.pop();
    $.ajax({
        url: url,
        ... other settings, as before ...
        success: function(data) {
           // Store the data we received
           dataAccumulator.push(data);
           if (urls.length > 0) runNextAjax();
           else displayAllData();
        },
        error: function(req, err) {
           ... do what you want with the error ...
           if (urls.length > 0) runNextAjax();
           else displayAllData();
        }
    });        
};

// Start the sequence off.
runNextAjax();
Ian
  • 3,619
  • 1
  • 21
  • 32
2

You can do something like this.

$('#button').click(function() {
    $.when(
        $.ajax({
            url: '/echo/html/',
            success: function(data) {
                alert('one is done')
            }
        }),
        $.ajax({
            url: '/echo/html/',
            success: function(data) {
                alert('two is done')
            }
        })
    ).then( function(){
        alert('Final Done');
    });
});

fiddle

Bharath R
  • 1,491
  • 1
  • 11
  • 23