How can I apply prototype's toggle to content loaded via JSON, IE problem only.

Question

I use PHP and javascript via prototype. i have a threaded comments page that on open by default via javascript call to a PHP file data returned via JSON, only parent comments are retrieved in the db. (in short only parent comments are fetched from db and displayed) then the parents are loaded and formatted to be shown on the page with a link to get and display its child comments, link example:

<span id="moreparent8351" onclick="insertChildDiv('parent8351')">1 Replies and more</span>

the span link above calls the javascript function "insertChildDiv()" that basically gets comments whose parent_id=parent8351, also using a PHP file that returns data via JSON to the javascript that dynamically inserts this child comments nested under its parent comment. then the span link above using prototype transforms into:

<span id="moreparent8351" onclick="$('childparent8351').toggle()">1 Replies and more</span>

now here is the problem, this inserted content inside this div with id=childparent8351 wont respond to the hide/show toggle ONLY in IE v6,v7 and v8. other browsers work fine. it looks like IE cannot apply the hide/show toggle to a dynamically inserted content. I tried hardcoding the inserted content that i see in fogbugz to the page and testing it again on IE, guess what? toggle works!

I dont want to fetch all the comments both parent and child and then hide the child comments, that is a waste of resources on something that we are not sure is important or to be read by the users.

Is there a workaround? if there is none, then i hope this post will help others on their design stage for something similar.

Answer 1

Element.toggle() should work fine with dynamically generated content. Your problem most likely lies within the method you use to generate this content.

You stated:

then the span link above using prototype transforms into:

<span id="moreparent8351" onclick="$('childparent8351').toggle()">1 Replies and more</span>

How exactly are you changing the onclick attribute of the span element?

First of all, I definately would not recommend changing an onclick event on-the-fly. It is probably better to use one function that checks the current state of what you are trying to do and executes the appropriate code.

Be sure not to "transform" your span element, including the onclick attribute using innerHTML. Chances are the DOM is still trying to reference a function that you have just removed. If updating your onclick attribute at all, do it like this:

var element = $('moreparent8351');
// this automatically removes previous onclick handlers set in this manner
element.onclick = function() { // do stuff };

...or, when you want to it the Prototype way:

var element = $('moreparent8351');
// OPTIONAL: remove previous handler, if set
element.stopObserving('click', my_cool_function());
// attach  new handler
element.observe('click', function() { // do stuff });