Switch Content Script I Doesn't Work When Loaded Dynamically...

[pcoles]

1) Script Title: Switch Content Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm

3) Describe problem:
I am trying to use the Switch Content Script on a set of search results that gets dynamically placed into the search results DIV. This way users can see more results on one page and expand them if they want to see more.

My problem is that the collapsing does not work when I add these results after the page has initially loaded. For example, I have a function called "submit()" that will populate the window with search results. If I call submit within the HTML for the page, the results will populate properly and collapse/expand on clicking. However, if I modify the page to run "submit()" as the result of clicking on a button on the page, the collapse/expand functionality no longer works.

To make things more interesting, if I add collapsible/expandable content within the HTML of the page, and then call "submit()" from a button, the original content will work fine, and the new content will also work too, except the "+" expandable symbol isn't initially shown and the collapse all/expand all links do not work.

Any help would be greatly appreciated!

[jscheuer1]

Whenever you dynamically add dynamic content like Switch Content to a page that is already loaded, if (as is the case with Switch Content) the added content has an onload initialization that it normally uses onload of the page it is on, it (or some form of the onload initialization) must be run after the new dynamic content is added, to properly initialize the added content.

If the dynamically added dynamic content isn't immediately available when first called for addition to the page, a timeout and/or poll must be used to delay its initialization until it is actually a part of the page.

[pcoles]

Yeah thanks, figured it out...

The "do_onload()" function needs to be called after the content is added. So I just modified my onclick call for the button from:


<script>document.getElementById("go2").onclick = submit;</script>

to:


<script>document.getElementById("go2").onclick = function() {
submit();
do_onload();
}
</script>

[jscheuer1]

Depending upon how rapidly submit(); assembles and adds the content to the page, in a live implementation especially, a timeout and/or poll may be required as well.