ajax value innerhtml bubbling problem

don't know what to call it

[Clinton Labombard]

In order to get around the anonymous function problem of not being able to pass by reference, I decided to pass the value submitted from the server into a hidden input so I could process the information. Well, that worked just fine, but the problem happened when I attempted to insert the new value into the innerHTML of another element which /should/ have worked, and /does/... but only after either refreshing the page or oddly, after calling alert(); the latter of which causes the inserted data to immediately show itself. This happens on Firefox and I haven't tested it on anything else.

[Fotiman]

I'm not sure I fully understand the problem.

Could you perhaps put together the minimum code required to recreate this problem?

[Clinton Labombard]

xmlhttp.onreadystatechange = function() {

if( (xmlhttp.readyState == 4) && (xmlhttp.status == 200) ) {

// stuff responseText into temp input field
document.getElementById('temp').innerHTML = xmlhttp.responseText;

// 'temp' may also be a hidden input, in which case it'll use 'value' instead of 'innerHTML'

}

}

And this works the way I planned it; however, the problem occurs here after that data is processed:

var rawData = document.getElementById('temp').innerHTML;

[process rawData into whatever]

document.getElementById('com_output').innerHTML = processedData;

The data only appears after either the page is refreshed (which defeats part of why one would use Ajax) or alert() is called (which would just get in the way if I did that every time).

[Fotiman]

Thanks, that helps.
Ok, so does your processing of the data happen inside the callback function? As in:

xmlhttp.onreadystatechange = function() { 
  if( (xmlhttp.readyState == 4) && (xmlhttp.status == 200) ) { 
    // stuff responseText into temp input field 
    document.getElementById('temp').innerHTML = xmlhttp.responseText; 
    var rawData = document.getElementById('temp').innerHTML; 
    //[process rawData into whatever] 
    document.getElementById('com_output').innerHTML = processedData; 
  } 
} 

Also, do you see the same behavior on multiple browsers? (which ones?)

[Clinton Labombard]

No, all the processing is done outside the callback function. The callback function stuffs the raw data from the server into a hidden element called 'temp':

document.getElementById('temp').innerHTML = xmlhttp.responseText;

The function which called the command which activated the server call processes the data afterwards by grabbing that data from 'temp':

var temp = document.getElementById('temp').innerHTML;

Unfortunately an alert popup used just after the server call shows 'temp' to be empty:

alert(document.getElementById('temp').innerHTML);

...but oddly, just after the alert popup (and never if the alert isn't there), the data shows up in the normal output divider (after being processed) like it's supposed to (as if the data really was in 'temp' after all, but only if alert() said 'Simon says!'). I'm perplexed.

This only happens on Firefox. Chrome and Opera show the alert popup, but IE 8 won't even show the popup.

Firefox's error console shows no errors on the page at any time.

[Fotiman]

Ah, ok, I think I know what the problem is then.

The AJAX call is asynchronous, so if you do something like this:

xmlhttp.onreadystatechange = function () {...}
xmlhttp.send();
var temp = document.getElementById('temp').innerHTML; 

There is no guarantee that your function to populate 'temp' will have been called before you try to access it. It's basically a timing issue. If you move that functionality into the callback, then I suspect you will see much better results.

[Clinton Labombard]

Well. That seems to solve the problem, but I know it really doesn't. The problem is the asynchonicity combined with no ability to pass values by address. Thank you for your help, now my mind is on the more important issue of why I chose to do this project using this obscure method and which language to learn next.

[Fotiman]

What do you mean as far as "pass value by address"?

[daveVk]

which language to learn next

Consider doing the same exercise with jQuery.

I assume the issue is that within the onreadystatechange you have lost the context of where the result needs to go ?

jQuery and assumably other libraries handle this, and ajax in general, well.

For a general solution without using a library, study javascript closures