How to make Multiple ajax requests in a loop return values sequentially?

ajax, jquery, request, synchronization

Solution

You could use a place-holder.

  $.each(elem, function (index, item) {

            var $placeholder = $('<div>').appendTo("div.content");

            $.ajax({
                type: 'post' ,
                url: moviesSearchUrl + '&q=' + encodeURI(item) + '&page_limit=1',
                dataType: "jsonp",
                async: false, 
                success: searchCallback
            });

            function searchCallback(data) {
                var movies = data.movies;

                var markup = index + ': '+   movies[0].title + '<img class=" bord" src="' + movies[0].posters.thumbnail + '" /><br/>';

                $placeholder.replaceWith(markup);
            }

        });
});

Problem

I have to make a series of Ajax requests on a loop. Around 100 of them. And each request returns a JSONP variable. I extract data from the JSON and keep appending the value into a div. The problem is that I want the div to be appended with data in the order of function call. i.e sequentially. Now i get a different order everytime i refresh the page depending on the order in which the request completes. Here's my code. ``` $.each(elem, function (index, item) { $.ajax({ type: 'post' , url: moviesSearchUrl + '&q=' + encodeURI(item) + '&page_limit=1', dataType: "jsonp", async: false, success: searchCallback }); function searchCallback(data) { var movies = data.movies; var markup = index + ': '+ movies[0].title + '<img class=" bord" src="' + movies[0].posters.thumbnail + '" /><br/>'; $("div.content").append(markup); } }); }); ``` As i am displaying the value of the index inside the div, everytime i get random orders . 2 4 3 1 7 sometimes and 1 5 2 7 4 sometimes. I even tries async: false . That doesnt help. I read somewhere that JSONP cannot be done with async: false . Please help me out.

Original source