ansaurus

Question

Nested jQuery tabs

Answer 1

+1 A:

Once you called a innerTab page, all the HTML elements become rendered at once. You could be having issues with multiple copies of ID fields, such as "tabs"... The JQuery is referencing $("#tabs"), but there are two present.

Can you please post the JQuery error?

Anthony M. Powers 2009-11-02 15:37:54

+1: element IDs must always be unique; otherwise you'll get very unpredictable behavior.

Matt Ball 2009-11-02 15:40:45

Refer to Wally's answer (below) for how to fix your code as I explained, with a code sample. (Thanks Wally!)

Anthony M. Powers 2009-11-02 16:53:51

Answer 2

A:

If you are fetching the inner tabs through ajax, don't include a full html document and jquery, everything is being redefined in javascript and is conflicting.

Simply remove the whole head, body, and html wrapper tags leaving the , and it should work.

You also need to redefine the tabs when they it is loaded. Add a callback to the ajax tabs function -- (something like function ontabAJAX(){ if ($('.tab .active .innertabs').length)){ $('.tab .active .innertabs').removeClass('innertabs').addClass('tabbed').tabs() }).

CodeJoust 2009-11-02 15:41:02

Answer 3

+2 A:

You are definitely running into a little bit of trouble with your duplicated 'Tabs' ID attribute. The following example should achieve what you're looking for:
Main File (Outer Tab)

<html>
<head id="Head1" runat="server">
    <title></title>
    <link type="text/css" href="http://static.jquery.com/ui/themes/base/ui.base.css"
      rel="stylesheet" />
    <link type='text/css' href='http://static.jquery.com/ui/themes/base/ui.tabs.css'
      rel='stylesheet'>
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"&gt;&lt;/script&gt;
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"&gt;&lt;/script&gt;
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"&gt;&lt;/script&gt;

</head>
<body>
  <div id="OuterTab">
    <ul>
      <li><a href="#InnerTab1" title="InnerTab1"><span>InnerTab1</span></a></li>
      <li><a href="#InnerTab2" title="InnerTab2"><span>InnerTab2</span></a></li>
    </ul>
    <div id="InnerTab1">   
    </div>
    <div id="InnerTab2">
    </div>
  </div>
      <script type="text/javascript">
        $(function() {
            $("#OuterTab").tabs();
            $('#InnerTab1').load('tab1.html', function() {
              $('#tabs').tabs();
            });
            $('#InnerTab2').load('tab2.html', function() {
              $('#tabs2').tabs();
            });
        });
    </script>
</body>
</html>

Tab 1 (tab1.html)

<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">
    This is tab b1 content
  </div>
  <div id="tabB2">
    This is tab b2 content
  </div>
</div>

Tab 2 (tab2.html)

<div id="tabs2">
  <ul>
    <li><a href="#tabA1"><span>InnerTabA1</span></a></li>
    <li><a href="#tabA2"><span>InnerTabA2</span></a></li>
  </ul>
  <div id="tabA1">
    This is tab A1 content
  </div>
  <div id="tabA2">
    This is tab A2 content
  </div>
</div>

This way, when you run your main file, the two tab files are requested via jQuery and loaded into the appropriate divs. Then I have defined a callback to activate the tabs that were just loaded.

If you need more details just follow up with a comment.

Wally Lawless 2009-11-02 16:46:21

WallyThanks for helping out. Your solution works great, but I've got a couple of further questions. Is it possible to lazy load any non-visible external files (i.e. tab2.html) so that they are only accessed when their outer tab is clicked? Also, is it possible to use the external files directly, i.e http://localhost/tab1.html). I'm basically trying to 're-use' the external files as part of the outer tab page, but I need to access them directly too. Thanks againAdrian

Adrian Pritchard 2009-11-03 17:57:56

Lazy loading the files wouldn't be too much of a stretch, you would have to attach the .load() functions to the parent tab's click() event. For your second part, you would have to use a partial content selector when getting the tab1.html and tab2.html files. If my example files were full HTML pages (<html><body> etc.) you could use this instead: $('#InnerTab2').load('tab2.html #tabs2', function()... instead.Make sense?

Wally Lawless 2009-11-09 13:54:42

WallySorry it's taken a while to respond. Been a bit sidetracked lately on other stuff. I hope to get back to my jQuery development soon, and try out your suggestions.Adrian

Adrian Pritchard 2009-12-02 11:03:26

No worries, I know the feeling!

Wally Lawless 2009-12-02 14:08:11

ansaurus

tags:

views:

answers:

Nested jQuery tabs

Outer Tab

InnerTab1.aspx

InnerTab2.aspx

related questions