functionality inside nested ajaxtabs

**samantha1977** · 10-10-2011, 10:00 PM

1) Script Title:
Ajax Tabs Content Script (v 2.2)

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...uppliment2.htm

3) Describe problem:
Hi! In a nested ajaxtabs, how can I cycle through the nested tabs? I copied the example on the website and inserted
a

Code:

<a href="javascript:provinces.cycleit('next')" style="text-decoration:none">Forward</a>

line, because the nested tab is called provinces. I thought that would be enough, but the button is not doing anything! What am I doing wrong?
The main tab is called countries and the cycle forward button for this tab is working when I call it with

Code:

javascript:countries.cycleit('next').

Thanks!

**samantha1977** · 10-11-2011, 07:32 PM

Hi!
just to elaborate a little bit: I copied the nested tabs example
from the website and the final code is like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="ajaxtabs/ajaxtabs.css" />
<script type="text/javascript" src="ajaxtabs/ajaxtabs.js"> </script>
</head>

<body>
<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){
var provinces=new ddajaxtabs("provincetabs", "provincedivcontainer")
provinces.setpersist(true)
provinces.setselectedClassTarget("link") //"link" or "linkparent"
provinces.init()
}
}

</script>
</body>
</html>

and the externalnested.htm is like this:

Code:

<div>
<ul id="provincetabs" class="shadetabs">
<li><a href="tutorial1.htm" rel="provincedivcontainer">Tut1</a></li>
<li><a href="tutorial2.htm" rel="provincedivcontainer">Tut2</a></li>
<li><a href="tutorial3.htm" rel="provincedivcontainer">Tut3</a></li>
<li><a href="external4.htm" rel="provincedivcontainer">Tab 4</a></li>
</ul>
<a href="javascript:countries.cycleit('next')" style="text-decoration:none">Forward</a>
<a href="javascript:provinces.cycleit('next')" style="text-decoration:none">Forward</a>
<div id="provincedivcontainer" style="padding: 10px; border-top: 1px solid gray;">
</div>

There are two "next" buttons in externalnested.htm. The one refering to countries is working and is cycling over the main tabs. But the second forward button refering to provinces is not working. I want it to cycle over the nested tabs (the tutorials).
Thanks! Sam

Thread: functionality inside nested ajaxtabs

Thread Tools

Search Thread

functionality inside nested ajaxtabs

Bookmarks

Bookmarks

Posting Permissions