global variable won't update from function within AJAX success

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
    });

Dan Manastireanu · Accepted Answer · 2011-05-16 20:32:30Z

1

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

stuff before $.ajax()
$.ajax() initiates an ajax call (while waiting for the response it continues to run the rest of the code)
stuff after $.ajax()
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);
});

answered May 16, 2011 at 20:32

Dan Manastireanu

1,8221 gold badge15 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jason Spick Over a year ago

So then, what would be the best way to store items into an array that were generated from ajax and then be able to use them later in the page?

Dan Manastireanu Over a year ago

Ideally you should access them only from the success callback. But if you need to access them on user interaction(like on click) you could save them globally like you are doing now (just be careful that the user might clicks too fast, i.e. before the data is received). To address this you could setup the click handler only when the data is received, and have the link do no action until then...

Dan Manastireanu Over a year ago

Here is a jsFiddle example of your situation, so you can understand the flow better

Jason Spick Over a year ago

Ok, So I'm doing some Research. What about using a jquery plugin for queuing? since I will need to do a second call based on the outcome of the first.

Dan Manastireanu Over a year ago

You can put the second call inside a method, and just call it from the success callback. Or you could take a look at jQuery.queue() or jQuery .queue()

|

Collectives™ on Stack Overflow

global variable won't update from function within AJAX success

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related