Question

I have nested each loops but an Ajax request in the second loop seems to not be adding to a variable that I declare in the first loop.

This is an example (“personal” information excluded) of what I am using:

var pages = [["Page Title 1", ["Page URL 1", "Page URL 2", "Page URL 3"]], ["Page Title 2", ["Page URL 1", "Page URL 2", "Page URL 3"]], ["Page Title 3", ["Page URL 1", "Page URL 2", "Page URL 3"]]];

function loadFeeds() {
$.each(pages, function(index, page) {
    $(".pages").append("<a class=\"pagename\" href=\"#" + page[0] + "\">" + page[0] + "</a>");
    html = "<div class=\"page\" id=\"" + page[0] + "\">";
    $.each(page[1], function(index, feedUrl) {

    $.ajax({
    type: "GET",
    url: feedUrl,
    processData : true,
    data: {
        tagmode: "any"
        },
    jsonp: "jsonp",
    dataType: "jsonp",
    success: function(data) {
        html += "Some header HTML";

        $.each(data.responseData.feed.entries, function(i,entry) {
            if (entry.image_urls.length === 0) {
                html += "HTML from the data";
            }
            else {
                html += "More HTML";
            }

            if ( i == 34 ) return false;
        });
        html += "Closing tags from the header";
        afterAjax();
        // console.log(html); returns correct information here
    },
            error: function(x,y,z) {
                alert(x.responseText);
            }
        });
    // console.log(html); returns everything declared to html OUTSIDE of the ajax request
    });
        $("body").append(html + "</div>");
    // Also tried: $("body").ajaxStop(function(){ $(this).append(html + "</div>"); }); because Ajax is asynchronous
});
}​

Any ideas as to what is going on?

EDIT:

Full non-working demo, WIP page functionality: http://jsfiddle.net/SO_AMK/u42uy/

Full working demo, no page functionality:

Full screen: http://jsfiddle.net/SO_AMK/LXkaN/embedded/result/
Normal: http://jsfiddle.net/SO_AMK/LXkaN/

Please note that these are without images and are not the full app.

Answer 1

ajaxStop is not firing because jsonp requests are by default not global. See here

I’ve updated your fiddle that forces jsonp requests as global. http://jsfiddle.net/u42uy/3/

*edit typo