Question

I’m having trouble getting a nested AJAX call to work properly. All I want is to have the inner AJAX call executed if and after the outer AJAX call completed successfully.

var diningHours = $("#diningHours");
var facStaffDiningData = $("#facStaffDiningData");
var diningCommonsData = $("#diningCommonsData");
if($.trim(diningHours.html()).length == 0) {
    var season;
    //This call executes fine (tested it with console logging)
    $.get("data/dining-hours.php", {summer: "check"}, function(seasonData, seasonStatus) {
        if(seasonStatus == "success") {
            season = seasonData;
            //This is the call that isn't being executed
            $.get("data/dining-hours.php", function(hoursData, hoursStatus) {
                if(hoursStatus == "success") {
                    var hours = $(hoursData).find("hours dining");
                    var html = hoursFeed(hours, season);
                    diningHours.append(html).collapsibleset("refresh");
                }
            });
        }

    });
}

Am I doing something wrong?

Answer 1

Digging deeper into the issue I found the true source of my problem. The XML document had a bunch of encoding errors (there were things like reserved and copyright symbols in with the data). Removing these and replacing them with the correct entities fixed the problem. My original code that I thought was the issue now works perfectly fine.