Trouble implementing nested tabs using jQuery UI

Question

I am using Ruby on Rails 3.0.9, jQuery 1.6.2 and jQuery UI. I am trying to implement nested tabs by following as well as possible the documentation , but I get some "strange" behavior for those nested tabs when I use AJAX.

I have two tabs ( tab1 and tab2 ) each having two nested tabs ( tab1_sub1 and tab1_sub2 nested\\related to tab1 , tab2_sub1 and tab2_sub2 nested\\related to tab2 ).

After loading the page containing the mentioned tabs, the output HTML code is:

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
  <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
          <a href="#tabs-1">
            tab1 title
          </a>
        </li>
        <li class="ui-state-default ui-corner-top">
          <a href="#ui-tabs-1">
            tab2 title
          </a>
        </li>
  </ul>

  <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
    <div id="tabs_sub1" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
      <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
          <a href="#tabs_sub1-1">
            tab1_sub1 title
          </a>
        </li>
        <li class="ui-state-default ui-corner-top">
          <a href="#ui-tabs-2">
            tab1_sub2 title
          </a>
        </li>
      </ul>

      <div id="tabs_sub1-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
        tab1 content
      </div>

      <div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
    </div>
  </div>

  <div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
</div>

At this time, on displaying the tab1 content, tab1_sub1 and tab1_sub2 work, as well.

Now, clicking on the tab2 title the output HTML code becomes:

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
  <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top">
          <a href="#tabs-1">
            tab1 title
          </a>
        </li>
        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
          <a href="#ui-tabs-1">
            tab2 title
          </a>
        </li>
  </ul>

  <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
    <div id="tabs_sub1" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
      <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
          <a href="#tabs_sub1-1">
            tab1_sub1 title
          </a>
        </li>
        <li class="ui-state-default ui-corner-top">
          <a href="#ui-tabs-2">
            tab1_sub2 title
          </a>
        </li>
      </ul>

      <div id="tabs_sub1-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
        tab2 content
      </div><div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
    </div>
  </div>

  <div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">

    <div id="tabs_sub1" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
      <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
            <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
              <a href="#tabs_sub1-1">
                tab2_sub1 title
              </a>
            </li>
            <li class="ui-state-default ui-corner-top">
              <a href="http://<hostname>/<path>"> # I think here is the problem (read above for more information).
                tab2_sub2 title
              </a>
            </li>
      </ul>

      <div id="tabs_sub1-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div>
    </div>
  </div>
</div>

Now, on displaying the tab2 content, when I click on the tab2_sub2 title it will load the tab2_sub2 content on the top of the current page and not inside the tab2_sub2 tab. That is, the browser will go to the URL http://<hostname>/<path> .

The problem (I think) is exactly in the following code:

...
  <a href="http://<hostname>/<path>">
...

Maybe the href value should be something like #ui-tabs-2 (as for\\in the tab1 content) and maybe there are some jQuery UI bugs when you use nested tabs in this way...

How can I solve that?

---

I have tried to solve the problem following this and this , but I didn't solve that.

Answer 1

The problem was in tabs CSS id values. Those must be different for each div id HTML attribute related to the <div id="tabs" class="..."> .

A simplest solution is to set tabs1 and tabs2 id values for those div s.