CODEWITHSUNDEEP
javascriptjquery-ui
Ethan
Ethan

Reputation: 31

jQuery tabs "add" method creates two <div> elements

I'm frustrated by the fact that the "add" method in jQuery's tabs ui is adding an extra tab-panel div to my "#tabs" element. This is the line of code I'm using to add a tab showing a calendar that gets its content via Ajax:

$("#tabs").tabs("add", "tabContent.php?id=48&tab=calendar", "Calendar");

Initially there was only one tab and now there should be two. Indeed, two tabs now exist in the <ul> element, but there are mysteriously now three <div> elements corresponding to tab panels as shown below. This wouldn't be a problem if not for the fact that one of the newly created <div> elements is not hidden even though it corresponds to an inactive tab. As a result, the <div>, though empty, takes up a block of space at the bottom of my first and original tab panel. Sorry for the cluttered code, but I included all the raw jQuery markup to show exactly what jQuery did.

<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">Tab 1</a></li>
        <li class="ui-state-default ui-corner-top"><a href="#ui-tabs-2"><span>Calendar</span></a></li>
    </ul>
    <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
            Original Tab
    </div>

    <!-- Why are there two divs here?? -->
    <!-- Note that first <div> below not given class 'ui-tabs-hide' -->
    <div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div>
    <div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
</div>

Notice the two <div> elements at the bottom where there should only be one.

Upvotes: 2

Views: 1131

Answers (2)

user189265
user189265

Reputation: 85

I have the same problem. Have you made any progress?

**EDIT: SEE http://bugs.jqueryui.com/ticket/5069

**

$('#tabs').tabs('add', '${pageContext.request.contextPath}/tmijsp/mockups/engineTestContainer.jsp' , 'Engine Test' );

I add my tab (this is for mockup purposes)... and I get the same mysterious tab in the container. I also try to remove all the tabs before creating new ones through : 

for (var i = number - 1; i >= 0; i--) {
        alert('removing ' + i);
        $('#tabs').tabs('remove', i);
        alert('removed ' + i);
    }

This loop seems to identify the non-mysterious tabs, but it doesn't see the mysterious ones. ...

so if I add 1 tab, 2 get created I remove all from the tab list via loop.. it identifies the 1... and the mysterious divs do not get deleted.

if I go and re-add say.. 2 more tabs, 4 get created. when I remove them.. the 2 displayed get removed, good... but the mystery divs do not.

The display and functionality is fine.. all except that I have this ever enlarging container of mystery hidden divs.. which grows the tabs vertically on the page.

Upvotes: 1

Polina
Polina

Reputation: 36

I just had the same problem. I use AJAX tabs too.

So i looked in the source code of JQuery UI.

Function add creates this extra div, but then function _tabify is called, and it creates extra div with no 'ui-tabs-hide' class. I think, it creates extra div because it can not find the first one.

Both functions use _tabId to get the id of the new tab, and it uses u() function to get the index of the tab.

The reason it doesn't work is that u() is called twice, in add and in tabify functions.

But u() uses variable v this way: ++v, so it gives you the index and adds 1.

So in the add function div with id 'ui-tabs-1' is created, but in tabify you get another id = 'ui-tabs-2', can not find it and another div is created.

I tried this: added if(!b)v-- before second call of _tabId: i=a._tabId(f);. It's in _tabify function.

Var b is true when tabs are created, and false when you add new tab. Theres one more function that calls _tabify with b=false, it's _setOption. But I don't know if this added code ruins it or not.

Upvotes: 1

Related Questions