Show / Hide Inside a Tab Panel page

how to execute javascript in page called inside a tab panel

[dcampbell]

Hi

I have an ajax tab panel in which each tab calls a remote page. This works fine however, in each of the remote pages called I have a show/hide div which won't execute inside the tab panel.

If I view the remote page as a stand alone page the show/hide works correctly. The default status of the div is hidden, however when I click to show it nothing happens.

Is it possible to use a show/hide div in a page called via the tab panel?

Regards

[dcampbell]

I forgot to mention, when I place the show/hide link in the parent page it works correctly, however when I place it in the called page it doesn't.

[subexpression]

dcampbell,

You want to pass Javascript into the innerHTML of an element?
Ajax's responseText returns a string, whereas responseXML returns XML.

If you insert a string into the .innerHTML property of an element, the Javascript functions won't work. This is why the Javascript(s) work when viewing the HTML page by itself, but they don't when they're coming from responseText.
You'll need to attach them to the page's DOM using responseXML and append the appropriate child elements:

var xml = xmlhttp.responseXML.documentElement;

OR, you could use responseText, and then use eval() to access the script tag's innerHTML:

container.innerHTML = xmlhttp.responseText;
var scripts = container.getElementsByTagName('script');
for(var i = 0; i < scripts.length; i++){
eval(scripts[i].innerHTML);
}

I know, eval() is frowned upon, but it's a quick & dirty way of getting it to work in a pinch.