New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

Nesting Ajax Tabs

It's possible to have nested Ajax Tabs. That is to say, the external page fetched by one of the tabs can in itself contain a new Ajax Tabs Content instance that loads other content when clicked on. The key is to enlist the help of the custom event handler "instance.onajaxpageload" on your main page to initialize the tabs that are on the external page. Sounds confusing? Lets see it all come together first with an example:

In the above example, "Tab 3" fetches an external page called "externalnested.htm" via Ajax that in itself contains another Ajax tabs Content instance. Here is the relevant HTML as it appears on the two pages:

Main Page HTML:

<ul id="countrytabs" class="shadetabs">
<li><a href="external1.htm" rel="countrycontainer" class="selected">Tab 1</a></li>
<li><a href="external2.htm" rel="countrycontainer">Tab 2</a></li>
<li><a href="externalnested.htm" rel="countrycontainer">Tab 3</a></li>
</ul>

<div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
</div>

<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

countries.onajaxpageload=function(pageurl){
if (pageurl.indexOf("externalnested.htm")!=-1){
provinces=new ddajaxtabs("provincetabs", "provincedivcontainer")
provinces.setpersist(true)
provinces.setselectedClassTarget("link") //"link" or "linkparent"
provinces.init()

}

}

</script>

"externalnested.htm" HTML:

<ul id="provincetabs" class="shadetabs">
<li><a href="external1.htm" rel="provincedivcontainer">Tab 1</a></li>
<li><a href="external2.htm" rel="provincedivcontainer">Tab 2</a></li>
<li><a href="external3.htm" rel="provincedivcontainer">Tab 3</a></li>
</ul>

<div id="provincedivcontainer" style="padding: 10px; border-top: 1px solid gray;">
</div>

Notice the code in red- this is code that originally should appear inside "externalnested.htm", but since the tabs in question are on an external page and being called dynamically via Ajax as nested tabs, the code to invoke it needs to be moved to the main page instead and called via the "onajaxpageload" event handler. This event handler basically fires whenever a tab fetching Ajax content has completed loading the external page in question:

instance.onajaxpageload=function(pageurl){
//if (pageurl=="href_attribute_value_of_tab"){
//run custom code
}

Use the parameter "pageurl" to determine which tab exactly is being clicked on based on its href attribute value, and only fire your custom code for the correct tab. In this case, since I only want to call my custom code to initialize the nested tabs when the 3rd tab is clicked on, I'm testing for:

if (pageurl.indexOf("externalnested.htm")!=-1){
"
"
}

here, or the "href" attribute of the 3rd tab.

If there are multiple tabs all with nested tabs, your custom code should include additional logic to react to each one, for example:

if (pageurl.indexOf("externalnested.htm")!=-1){
"
"
}
else if (pageurl.indexOf("externalnested2.htm")!=-1){
"
"
}
else if (pageurl.indexOf("externalnested3.htm")!=-1){
"
"
}

and so on. Use the above technique to set up nested tabs whenever the nested tabs are contained in an external page and fetched via the Ajax option. If the external page is fetched via IFRAME, the above will not work and is unnecessary anyhow, as the nested tab's invocation code should simply appear within the external page itself.

On the next page, lets wrap everything neatly together in the form of the documentation for the script!

Table Of Contents

This script consists of an index page plus a supplementary page: