PDA

View Full Version : Nesting Ajax Tabs - Refresh Problem in IE and Chrome



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>

ddadmin
01-28-2010, 10:25 PM
Please post a link to the page on your site that contains the problematic script so we can check it out.