Question

OK, so I cannot seem to be able to change the global variable of systemPath after it goes through the ajax.It will work inside of ajax, but I need that updated variable outside of ajax. basically I’m trying to create an array of paths from xml and use them to locate other xml files that I can generate a table from.

Does anyone know what’s going on here? Does ajax run before the variable is set and that is why I get an array length of 0 after the ajax?

    var systemPath = new Array();
var techDigestArr = new Array();
var addToArray = function(thisarray, toPush){
    thisarray.push(toPush);
}

$.ajax({
    url: fullPath+"technical/systems/systems.xml",
    dataType: ($.browser.msie) ? "text" : "xml",
    success: function(data){
                            var xml;    
                            if (typeof data == "string") {
                               xml = new ActiveXObject("Microsoft.XMLDOM");
                               xml.async = false;
                               xml.loadXML(data);
                            } else {
                               xml = data;
                            }
                            $(xml).find("system").each(function(){
                                var urlString = fullPath + "technical/system_" + $(this).attr("id") + "/" + $(this).attr("id") + "tech-digest.xml <br />";
                                //alert(urlString);
                            $("#td-articles").append(systemPath.length + urlString);
                                addToArray(systemPath,urlString);
                                //systemPath.push(urlString);
                            });
                        $("#msg-output").append("total - " +systemPath.length);//Returns 48

                    },//END SUCCSESS
    error: function(){
        alert("Sorry - ");
        history.go(-1);
    }
});//END AJAX CALL
    $(document).ready(function(){
        //$("#msg-output").append("total - " + systemPath.length); Returns 0
    });

Answer 1

The ajax is ran asynchronously. Things execute in this order in your code.

1. stuff before $.ajax()
2. $.ajax() initiates an ajax call (while waiting for the response it continues to run the rest of the code)
3. stuff after $.ajax()
4. success callback

Note that depending on how fast the call is 3 and 4 might occur in reverse order (not the case here)

So when $(document).ready() is executed the ajax call might not have returned yet, so the code in the success callback didn’t have a chance to execute. If you are lucky and have a fast connection than maybe the response will come before document ready, but it’s unlikely.

Just so you can see that the global variable gets updated you can set a timeout:

$(document).ready(function(){
  setTimeout(function(){
    $("#msg-output").append("total - " + systemPath.length);
    //if the delay set below is more than the time between the ajax request and the server response than this will print the correct value 
  },2000);
});