Custom JavaScript within content loaded into Ajax Tabs

[webuser]

1) Script Title: Ajax Tabs

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

3) Describe problem:
I have set up the AjaxTabs content script to generate dynamic number of tabs based on a selection in a previous page's form. In the resulting page that contains the Ajax tabs, I load content into each tab dynamically, i.e. a server-generated page that contains various types of tabular data.

Within the bounds of the loaded content, I have to define some custom behavior via JavaScript that enhances the functionality of the loaded tabular content. Examples include table row hover-based highlighting, context menu for each table row, a mini-form with JavaScript validations, etc.

I tried to start with a simple onload script that uses 2 colors alternatively to shade the table rows. This script is part of the loaded content. But the script is not working. I ensured there are no JavaScript errors using the Firebug plugin and also to ensure that the JavaScript is valid.

How can I get around this behavior and enhance the loaded content's behavior with custom scripting? I appreciate any suggestions and direction on this.

-webuser

[ddadmin]

It really depends on the details here. There is the onajaxpageload event handler of the script that lets you run custom code whenever a page finishes loading via Ajax inside one of the tabs. Are you basically asking for something similar, but that fires whenever the user clicks on a tab period?

[webuser]

I looked up the AjaxTabs documentation and did come across the onajaxpageload that you are referring to. Thank you for pointing it out to me. While it definitely helps along with using the pageurl argument, it seems inconvenient when 90% of the JavaScript I need is really associated with the content that gets loaded under the selected tab. Let me elaborate one of the examples I briefly mentioned in my original post -

Say Tab1 loads up a small HTML form and a table of data. The HTML form has some associated JavaScript validations that are totally specific to Tab1's content. Based on the form input, the data table is refreshed. In addition, the table is enhanced from an UI perspective. It seems like placing all that JavaScript into the tab container (outer) page couples the outer page too tightly with the contents from each tab. Having dynamic number of tabs with dynamic content only seems to exacerbate this issue.

I have been looking up the web in the meantime, and I understand that any script/styles/etc. placed into a DIV via innerHTML gets disabled - this seems to be a classic problem. What I am asking is has this been solved or am I going down the wrong path?

-webuser

[ddadmin]

It's true JavaScript imported onto the page via .innerHTML won't work in many cases. This can be circumvented though by using the IFRAME option of Ajax Tabs to load your pages.

On Ajax fetched tabs, a potential workaround is to import the scripts separately as external .js files (see here (http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml)).