Possible Javascript scope issue

Question

I'm sort of a noob with this so please forgive me :)

I can't get this one part of the function to update the variable. Could anyone possibly take a look a see what I'm doing wrong?

http://pastie.org/private/zfnv8v2astglabluo89ta

From line 142 thru 172 I'm not getting any results in the end. I've tested inside that function to make sure it is actually returning data, but the "body" variable is passing back up after line 172. So if I look at my generated HTML on the page, it simply looks the function skips from 140 to 174.

Thanks for any feedback!!

• James Allardice: You're likely to get far better results if you narrow down the problem to a specific bit of code, rather than sticking your entire script on a paste bin and hoping people are going to debug the whole thing. It's also useful to produce an example of jsfiddle.net so we can see it running.
• Ben: There's GOT to be a better way to do that...have a look at DOM stuff. You can simply do document.createElement("body") and someElement.insertChild(anotherElement). Also, what @James Allardice said. All that aside, welcome to SO!

Answer 1

Your $.get is asynchronous. That means it will finish sometime AFTER the rest of the code, thus you won't see it's effect on the body variable inside that function. Instead, it's success callback function will be called long after this function has already finished.

To chain multiple asynchronous ajax calls like you have here, you can't just use normal sequential programming because asynchronous ajax calls aren't sequential. The network request is sent, then your javascript continues executing and SOMETIME LATER when the response arrives, the success handler is called and is executed.

To run sequential ajax calls like you have, you have to nest the work inside the success handler so that the ONLY code that uses the response is actually in the success handler. In pseudo-code, it looks like this:

$.get(..., function(data) {
 // operate on the results only in here
 // a second ajax function that uses the data from the first 
 // or adds onto the data from the first
 $.get(..., function(data) {
 // now finally, you have all the data 
 // so you can continue on with your logic here
 });
 // DO NOT PUT ANYTHING HERE that uses the responses from the ajax calls 
 // because that data will not yet be available here
});

You cannot do what you're doing which is like this:

var myVariable;
$.get(..., function(data) {
 // add something to myVariable
});
$.get(..., function(data) {
 // add something to myVariable
});
$.get(..., function(data) {
 // add something to myVariable
});
// do something with myVariable

None of those ajax calls will have completed before the end of your function. You have to follow a design pattern like in my first example.

For more advanced tools, one can always use jQuery deferreds which are just a different way of defining code to run after an ajax call is done. It looks a little more like sequential programming even though it's really just scheduling code to run the same way my first code example does.

• kwmcnutt: Thank you for clearing that up. That explains a lot :). I was having strange things happen before I rearranged some things in this pass, but it totally makes sense now why that was happening. I'll see what I can do to redesign the flow. Thanks again for taking the time to explain all this.

Answer 2

Function 8 will be invoke after line 174-180. You must put code from 174-180 line to the end of function