1pt619
01-28-2010, 05:30 PM
1) CODE TITLE:
Nesting Ajax Tabs
http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/ajaxtabs_suppliment2.htm
2) DESCRIPTION:
When the refresh button is clicked in IE the nested tabs still display, however the ajax loaded content disappears and when you click a nested tab it opens it in a new page.
In Chrome the entire page refreshes and reloads the first tab and it's external content.
Firefox works fine... And the example - http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/ajaxtabs_suppliment2.htm - works in all browsers.
<div style="float:left; padding-right:4px;">
<ul id="countrytabs" class="verticalTabs">
<li><a href="external1.htm" rel="countrycontainer" class="selected">Administrative Units</a></li>
<li><a href="external2.htm" rel="countrycontainer">Tab 2</a></li>
<li><a href="external3.htm" rel="countrycontainer">Tab 3</a></li>
<li><a href="nested.htm" rel="countrycontainer">Tab 4</a></li>
</ul>
</div>
<div id="countrydivcontainer" style="width:760px; height:640px; margin-bottom:1em; padding:10px; float:left; border:1px solid #bebebe; background:#dedede"></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("nested.htm")!=-1){
provinces=new ddajaxtabs("provincetabs", "provincedivcontainer")
provinces.setpersist(true)
provinces.setselectedClassTarget("link") //"link" or "linkparent"
provinces.init()
}
}
</script>
And then nested.htm:
<div style="padding:0px; float:left; width:762px; height:620px; ">
<ul id="provincetabs" class="horizontalTabs" >
<li><a href="external5.htm" rel="provincedivcontainer">Tab 5</a></li>
<li><a href="external6.htm" rel="provincedivcontainer">Tab 6</a></li>
<li><a href="external7.htm" rel="provincedivcontainer">Tab 7</a></li>
</ul>
<div id="provincedivcontainer" style="padding:10px; float:left; clear:both; background:#FFF; border:1px solid #bebebe; width:738px; height:597px;">
</div>
</div>
Nesting Ajax Tabs
http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/ajaxtabs_suppliment2.htm
2) DESCRIPTION:
When the refresh button is clicked in IE the nested tabs still display, however the ajax loaded content disappears and when you click a nested tab it opens it in a new page.
In Chrome the entire page refreshes and reloads the first tab and it's external content.
Firefox works fine... And the example - http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/ajaxtabs_suppliment2.htm - works in all browsers.
<div style="float:left; padding-right:4px;">
<ul id="countrytabs" class="verticalTabs">
<li><a href="external1.htm" rel="countrycontainer" class="selected">Administrative Units</a></li>
<li><a href="external2.htm" rel="countrycontainer">Tab 2</a></li>
<li><a href="external3.htm" rel="countrycontainer">Tab 3</a></li>
<li><a href="nested.htm" rel="countrycontainer">Tab 4</a></li>
</ul>
</div>
<div id="countrydivcontainer" style="width:760px; height:640px; margin-bottom:1em; padding:10px; float:left; border:1px solid #bebebe; background:#dedede"></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("nested.htm")!=-1){
provinces=new ddajaxtabs("provincetabs", "provincedivcontainer")
provinces.setpersist(true)
provinces.setselectedClassTarget("link") //"link" or "linkparent"
provinces.init()
}
}
</script>
And then nested.htm:
<div style="padding:0px; float:left; width:762px; height:620px; ">
<ul id="provincetabs" class="horizontalTabs" >
<li><a href="external5.htm" rel="provincedivcontainer">Tab 5</a></li>
<li><a href="external6.htm" rel="provincedivcontainer">Tab 6</a></li>
<li><a href="external7.htm" rel="provincedivcontainer">Tab 7</a></li>
</ul>
<div id="provincedivcontainer" style="padding:10px; float:left; clear:both; background:#FFF; border:1px solid #bebebe; width:738px; height:597px;">
</div>
</div>