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: