jQuery UI Tabs adds classes to wrong div?

4
votes

I'm trying to use jQuery UI 1.7.2 to add tabs on the fly. First, I create the div that holds the content that belongs in the tab, and then I call $('#tabs').tabs("add",...). jQuery UI correctly adds a new li in the tabs list. However, instead of creating a class attribute on my tab div, it creates a whole new tab div with some bogus id, and creates the class on that.

Here's the mark-up it generates:

<div id="tabs" class="ui-tabs ui-widget ui-widget-content">
  <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
  <li class="ui-state-default"><a href="#ui-tabs-41"><span>Tab 1</span></a></li>
  <li class="ui-state-default"><a href="#ui-tabs-36"><span>Tab 2</span></a></li>
  <li class="ui-state-default"><a href="#ui-tabs-27"><span>Tab 3</span></a></li>
  </ul>

  <div id="MyTab1"><img src="/1.jpg"/></div>
  <div id="ui-tabs-41" class="ui-tabs-panel ui-widget-content ui-tabs-hide"/>
  <div id="ui-tabs-36" class="ui-tabs-panel ui-widget-content ui-tabs-hide"/>
  <div id="ui-tabs-27" class="ui-tabs-panel ui-widget-content"/>
  <div id="MyTab2"><img src="/2.jpg"/></div>
  <div id="MyTab3"><img src="/3.jpg"/></div>

The divs like MyTab1, etc. are the ones I want to be turned into tabs. The divs like ui-tabs-41 are the ones that jQuery UI decides to generate on its own... and I don't know why.

2
jqueryjquery-uijquery-ui-tabs
What does your markup look like pre-jQuery changing it? – T. Stone

2 Answers

4
votes

Apparently, you have to first call $('#tabs').tabs("add", "#MyTab1", ...), and only then insert your content into #MyTab1. jQuery UI cannot take your existing #MyTab1 container and turn it into a tab. This is not obvious from the jQuery UI docs.

0
votes

hmm, not entirely sure, but a I had the same problem, until i read in the documentation which said that, if you add a title tag to the li>a like

   <div id=tabs>
   <ul>
   <li><a href="#Tab1" title="Tab1">Tab 1 Head</a></li>
   </ul>
    <div id=Tab1>tab 1 content</div>
   </div>

it DOES use the predefined div and does not add any other ones (i.e just $("#tabs").tabs() )works fine without any "add" etc (worked for me anyway). Dunno, maybe it helps someone