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,h ello3) 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').in nerHTML); 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:'<xm p>' + 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').inner HTML = req.responseTex t;

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.responseTex t method.

Once again, thanks!

[rkrstar]

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