Need help with nested ajax tabs Please

[Billy Johnson]

1) Script Title: Ajax Tabs Content script

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

3) Describe problem: Ok I have 5 main tabs and I need a nested tab on everyone. the first nested tab works fine, but when I add a second nested tad on on the second tab, it dosent work right, when yoy click the tab it takes you to a seperate page instead on showing it in the div section of the nested tab.
---here is the first page---
<ul id="countrytabs" class="shadetabs">
<li><a href="ajax_ext/externalnested.asp" rel="countrycontainer">Residential</a></li>
<li><a href="ajax_ext/externalnested2.asp" rel="countrycontainer">Business</a></li>
<li><a href="ajax_ext/externalnested3.asp" rel="countrycontainer">Customer Service</a></li>
<li><a href="ajax_ext/externalnested4.asp" rel="countrycontainer">Networking</a></li>
<li><a href="ajax_ext/externalnested5.asp" rel="countrycontainer">Creative Services</a></li>
</ul>

<!--<a href="#" rel="#default" class="selected"__#iframe-->
<div id="countrydivcontainer" style="border:1px solid gray; width:100%; margin-bottom: 1em; padding: 50px">
<p>This is some default tab content, embedded directly inside this space and not via Ajax. It can be shown when no tabs are automatically selected, or associated with a certain tab, in this case, the first tab.</p>
</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.asp")!=-1){
var res=new ddajaxtabs("restabs", "resdivcontainer")
res.setpersist(true)
res.setselectedClassTarget("link") //"link" or "linkparent"res.init()

}

}
</script>


---here is the first nested tab that is working----

<ul id="restabs" class="shadetabs">
<li><a href="ajax_ext/external_tel_res.asp" rel="rescontainer">Telephone</a></li>
<li><a href="ajax_ext/external_dsl.asp" rel="rescontainer">DSL Internet</a></li>
<li><a href="ajax_ext/external_dialup.asp" rel="rescontainer">Dial-up Internet</a></li>
<li><a href="ajax_ext/external_wireless.asp" rel="rescontainer">Wireless</a></li>
<li><a href="ajax_ext/external_support.asp" rel="rescontainer">24/7 Support</a></li>
</ul>
<!--<a href="#" rel="#default" class="selected"-->
<div id="resdivcontainer" style="border:1px solid gray; width:100%; margin-bottom: 1em; padding: 10px">
<p>external nested page</p>
</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.asp")!=-1){
var res=new ddajaxtabs("restabs", "resdivcontainer")
res.setpersist(true)
res.setselectedClassTarget("link") //"link" or "linkparent"
res.init()


}

}

</script>


---here is the tab that is not working right---
<ul id="restabs" class="shadetabs">
<li><a href="ajax_ext/external_tel_bus.asp" rel="rescontainer">Telephone</a></li>
<li><a href="ajax_ext/external_internet_service.asp" rel="rescontainer">Internet Service</a></li>
<li><a href="ajax_ext/external_PBX.asp" rel="rescontainer">PBX</a></li>
<li><a href="ajax_ext/external_IT_support.asp" rel="rescontainer">IT Support</a></li>
<li><a href="ajax_ext/external_video_con.asp" rel="rescontainer">Video Conferencing</a></li>
</ul>
<!--<a href="#" rel="#default" class="selected"-->
<div id="resdivcontainer" style="border:1px solid gray; width:100%; margin-bottom: 1em; padding: 10px">
<p>external nested page2</p>
</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("externalnested2.asp")!=-1){
var res=new ddajaxtabs("restabs", "resdivcontainer")
res.setpersist(true)
res.setselectedClassTarget("link") //"link" or "linkparent"
res.init()
}

}

</script>

the url where you can view it in a browser is http://www.ntslink.net/ajax_tabs.asp

Thank you for any suggestions
Billy Johnson

[ddadmin]

You are using two "onajaxpageload" events, which is incorrect, as one will be overridden by the other. Regardless of how many of your tabs are nested, on the main page, you should only call "onajaxpageload" once, but inside the custom function, initalize different sub tabs depending on the URL of the tab item clicked on. So something like:


countries.onajaxpageload=function(pageurl){
if (pageurl.indexOf("externalnested.asp")!=-1){
var res=new ddajaxtabs("restabs", "resdivcontainer")
res.setpersist(true)
res.setselectedClassTarget("link") //"link" or "linkparent"
res.init()
}
else if (pageurl.indexOf("externalnested2.asp")!=-1){
var anotheruniquevar=new ddajaxtabs("restabs2", "resdivcontainer2")
anotheruniquevar.setpersist(true)
anotheruniquevar.setselectedClassTarget("link") //"link" or "linkparent"
anotheruniquevar.init()
}
}
and so on. Make sure when you call:


new ddajaxtabs("restabs", "resdivcontainer")

each time, that the two parameters entered properly correspond to the IDs of the tab interface/ content container in question.

p.s: Please format any code in your post using the CODE (#) tag. This makes it a lot easier to read it.

[Billy Johnson]

Thank You It worked great....
Have a good weekend...