Multiple loop with ajax not working

Question

I have an Ajax code like following

$(document).ready(function () {
    var galname,URL,count,images,cur;
    $.ajax({
        url: "../Home/Gallery",
        success: function (data) {
            $(data).find("#galcontent p").each(function () {
                galname=$(this).html();
                URL = "../Home/Show?foldername=" + galname;
                alert(URL);
                $.ajax({
                    url: URL,
                    success: function (data) {
                    alert("find");
                    }
                });

            });
        }

    });

});

Actulaly i want the output like first alert URL, then goto next ajax loop and alert Find, then Next URL and so on. but in this loop its first alert all URL then goto next loop of ajax (only after the last each the second ajax loop is working.

AJAX requests are asynchronous. The "loop body" is a *callback function* that will be executed a few milliseconds later, when the request completes. Unless your code relies on the order in which these requests complete, it should still work even if the alerts aren't in the order you expected. — Emil Lundberg, Sep 15 '14 at 06:36
Please define "not working". Your statement of requirements is completely unclear. — Alnitak, Sep 15 '14 at 06:37
@ling.s write code that doesn't rely on the order in which requests complete instead. — Emil Lundberg, Sep 15 '14 at 06:39
@ling.s because synchronous AJAX calls block the thread of execution, and lead to a bad user experience. — Alnitak, Sep 15 '14 at 06:41
@Alnitak: means first complete the each funtion, then only goto next ajax loop. i want to work the second ajax loop inside the each function — shyama, Sep 15 '14 at 06:42
@ling.s there's "working", and then there's _"working properly"_ — Alnitak, Sep 15 '14 at 06:47
@shyama that's still totally unclear (despite the comment upvotes). I only see _one_ `.each` loop, so where's this "second ajax loop" ? — Alnitak, Sep 15 '14 at 06:48

Sabar · Accepted Answer · 2014-09-15T06:55:33.297

1

In order for the ajax calls to be executed sequentially, you need to make subsequent ajax calls as the success of the previous. You could achieve this a number of ways. One such is doing this recursively:

var galname,URL,count,images,cur,content;

function moreAjax(i) {
    if (i === content.length) return;
    else {
        galname=$(this).html();
        URL = "../Home/Show?foldername=" + galname;
        alert(URL);
        $.ajax({
            url: URL,
            success: function(data) {
                alert("find");
                moreAjax(i + 1);   
            } 
        });
    }
}

$(document).ready(function () {
    $.ajax({
        url: "../Home/Gallery",
        success: function (data) {
            content = $(data).find("#galcontent p");
            moreAjax(0);
        }    
    });
});

I haven't tested this code out and JS isn't my native language, but I believe this approach should work.

edited Sep 15 '14 at 06:55

answered Sep 15 '14 at 06:49

Sabar

478
2
20

it probably works, but it's not "clean" IMHO because it relies on too many variables in the outer scope. – Alnitak Sep 15 '14 at 06:59
That's fair. It would probably be better to declare a nested function as you did with loop(), thus keeping everything inside the $(document).ready. However, since he's not really working with the data from the inner ajax call, isn't it faster to use success() over then() (according to http://stackoverflow.com/questions/16385278/angular-httppromise-difference-between-success-error-methods-and-thens-a)? I'm probably wrong since I'm not too familiar with javascript, but what is the advantage of using then()? – Sabar Sep 15 '14 at 07:07
1

That article relates to angularjs, not jQuery. AFAICR, jQuery these days implements `success:` just like `.then`. I prefer to use `.then` because it's the modern "promise-based" method. – Alnitak Sep 15 '14 at 07:09

score 1 · Answer 2 · answered Sep 15 '14 at 06:55

As I understand it, your problem is that you wish to run the AJAX calls in serial rather than potentially in parallel.

Here, I'm using jQuery's .then method to (pseudo-)recursively call the inner loop function for each element in the array in turn:

function processData(data) {

    // get the URLs from the original AJAX download
    var URLs = $(data).find('#galcontent p').map(function() {
        return '../Home/Show?foldername=' + $(this).text(); // NB: not .html()
    }).get();

    // IIFE, processes one element from the array in turn
    (function loop() {
        var url = URLs.shift();
        if (url) {
            alert(url);
            $.ajax({ url: url }, success: function() {
                alert("find");
            }).then(loop);  // recurse here
        }
    })();
}

and then the above function can be passed as the .then callback to the first AJAX call:

$(document).ready(function () {
    $.ajax({
        url: "../Home/Gallery",
    }).then(processData);
});

Multiple loop with ajax not working

2 Answers2