[jQuery] Nested Tabs
[jQuery] Nested Tabs
Hi
I'm new to jQuery (a couple of weeks). I'm trying to nest the jQueryUI
tab control. It works fine until the nested tabs are in an external
file then I get an exception thrown in the jQuery source. This seems
to be a timing issue to a certain extent, because if I place alert
boxes in the .ready function of the nested tabs it works. Can anyone
help? I'm sure this question must have been asked before, but after
hours of searching I can't seem to find a solution.
Here's my very simple example...
Outer Tab
-------------
<head id="Head1" runat="server">
<title></title>
<link type="text/css" href="css/jquery-ui-1.7.2.custom.css"
rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/
jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/
ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/
ui.tabs.js"></script>
<script type="text/javascript">
$(function() {
$("#OuterTab").tabs();
});
</script>
</head>
<body>
<div id="OuterTab">
<ul>
<li><a href="innerTab1.aspx" title="InnerTab1"><span>InnerTab1</
span></a></li>
<li><a href="innerTab2.aspx" title="InnerTab2"><span>InnerTab2</
span></a></li>
</ul>
<div id="InnerTab1">
</div>
<div id="InnerTab2">
</div>
</div>
</body>
</html>
innerTab1.aspx
----------------------
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<link type="text/css" href="css/jquery-ui-1.7.2.custom.css"
rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/
jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/
ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/
ui.tabs.js"></script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabA1"><span>InnerTabA1</span></a></li>
<li><a href="#tabA2"><span>InnerTabA2</span></a></li>
</ul>
<div id="tabA1"></div>
<div id="tabA2"></div>
</div>
</body>
</html>
innerTab2.aspx
----------------------
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<link type="text/css" href="css/jquery-ui-1.7.2.custom.css"
rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/
jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/
ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/
ui.tabs.js"></script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabB1"><span>InnerTabB1</span></a></li>
<li><a href="#tabB2"><span>InnerTabB2</span></a></li>
</ul>
<div id="tabB1"></div>
<div id="tabB2"></div>
</div>
</body>
</html>
Thanks in advance!
Adrian