InnerHTML vs Ajax

[rayliu]

Recently, I have been attempting to pick up AJAX and discovered a slight problem with innerHTML..

I have

<div id='container'></div>
 

then ..

$('container').innerHTML=req.responseText;
 

The content shows up but when I view source, the <div id='container'> </div> tag shows up as EMPTY, does not input the new content, although the browser displays the ajax reponse in the div, to the user... I assume that innerHTML displays the content directly to the screen but does not update the content between the <div> </div> .. which brings up another problem as my javascript for ajax-in-place-editor references some <div> which was supposed to show up between the <div id='container'> </div> tag ...

What should have been displayed:
eg.

<div id='container'> 
<div id='header_1'>hello1</div>
<div id='header_2'>hello2</div>
<div id='header_3'>hello3</div>
</div>
 

instead, it is showing

<div id='container'></div> 
 

as before, and is EMPTY in between those tags (although the browser shows
hello1,hello2,hello3) but my javascript breaks here, since it cannot find <div id='header_1'> ... and 2, and 3, and so forth..

Any idea how I could solve this problem?
Any help is appreciated! Thanks!

[Dormilich]

doesn't jquery provide a method for that?

[rayliu]

Hi there, thanks for your prompt reply!
hmm actually at the moment I'm using prototype instead of jquery.. would that be a problem in resolving this issue?

[Dormilich]

I guess not.
..............

[Canabeez]

"View Source" does not show any JavaScript generated source (except document.write() method in some cases). Firefox Developer Plugin has an option of "View Generated Source", which might help you, otherwise you could always alert(document.getElementById('container').innerHT ML); or set it as value to some textarea.

[rayliu]

Thanks for your help!
I did read something about putting this into the address bar

javascript:'<xmp>' + window.document.body.outerHTML+ '</xmp>'

that will show the javascript generated source as well..

I have solved the bug, so far I realised that javascript that references to the <div> does work, even though it can't see it.. but only after I've used prototype's element update method.. I believe it does something similar to eval() which makes the javascript works ...

However if you only use the conventional

$('show').innerHTML = req.responseText;

it will not work as the generated javascript does not run.. so I believe as Dormilich has kindly advised earlier, jQuery and Prototype both have their own update method instead of using the direct $('container').innerHTML = req.responseText method.

Once again, thanks!

[rkrstar]

You can have firebug addon for Firefox. Using that you can see the dynamic html changes in an element.