homepage Welcome to WebmasterWorld Guest from 54.166.105.24
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
ajax value innerhtml bubbling problem
don't know what to call it
Clinton Labombard




msg:4146468
 6:56 pm on Jun 3, 2010 (gmt 0)

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




msg:4146563
 8:45 pm on Jun 3, 2010 (gmt 0)

I'm not sure I fully understand the problem.

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

Clinton Labombard




msg:4146724
 4:39 am on Jun 4, 2010 (gmt 0)

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




msg:4146930
 2:10 pm on Jun 4, 2010 (gmt 0)

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




msg:4147074
 6:52 pm on Jun 4, 2010 (gmt 0)

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




msg:4147089
 7:30 pm on Jun 4, 2010 (gmt 0)

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




msg:4147199
 2:36 am on Jun 5, 2010 (gmt 0)

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




msg:4147208
 2:47 am on Jun 5, 2010 (gmt 0)

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

daveVk




msg:4147231
 4:29 am on Jun 5, 2010 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved