Opened 9 years ago

Closed 9 years ago

Last modified 7 years ago

#6247 closed bug (duplicate)

Tabs add function adds two panels

Reported by: lotjuh Owned by:
Priority: major Milestone:
Component: ui.tabs Version: 1.8.5
Keywords: Cc:
Blocked by: Blocking:

Description

When adding a tab, I see two ui-tabs-panels inserted in the HTML, from which one stays empty and the other one gets loaded with the tab content:

<div id="contentTabs" 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 ui-sortable">
        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
            <a onclick="javascript: reloadTab('#contentTabs', this)" href="#file_1_2">
                <span>Opbrengst NZ 2010</span>
            </a>
            <span class="ui-icon ui-icon-close" onclick="javascript: removeTab('#contentTabs', this);"></span>
        </li>
    </ul>
    <div id="file_1_2" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
        <div class="content">
            ....
        </div>
    </div>
    <div id="file_1_1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div>
</div>

I'm using the following code

$('#contentTabs').tabs({
    'cache'  : true,
    'spinner': 'Bezig met laden',
    'add'    : function(event, ui) {
        if(ui.index > 0) {
            $(this).tabs('select', '#'+ui.panel.id);
        }
    },
    'ajaxOptions': {
        'async': false,
        'error': function(xhr, status, index, anchor) {
            $(anchor.hash).html('Er is iets mis gegaan. De pagina kon niet worden geladen');
        }
    }
});

$('#contentTabs').tabs('option', 'tabTemplate', 
    '<li>'+
    '    <a href="#{href}" onclick="javascript: reloadTab(\'#contentTabs\', this)">'+
    '        <span>#{label}</span>'+
    '    </a>'+
    '    <span onclick="javascript: removeTab(\'#contentTabs\', this);" class="ui-icon ui-icon-close"></span>'+
    '</li>'
);


var tabId = 'file_'+fileId+'_';
$('#contentTabs').tabs('option', 'idPrefix', tabId);
createTab('#contentTabs', 'index.pl?a=file_open;fileId='+fileId, name, tabId);

function createTab(parentId, tabUrl, tabLabel, tabId) {
    if($(parentId).length > 0 ) {
        var $tab = $(parentId).tabs();
        var selected = $tab.tabs('option', 'selected');
        if($('div[id^='+tabId+']', $(parentId)).is('div')) {
            var index = $(parentId + ' div').index($('div[id^='+tabId+']'));
            if(!(index == selected)) {
                $(parentId).tabs('url', index, tabUrl);
                $(parentId).tabs('select', index);
                $(parentId).tabs('load', index);
            }
        } else {
            $(parentId).tabs('add', tabUrl, tabLabel);
        }
    }
}

Change History (2)

comment:1 Changed 9 years ago by Scott González

Resolution: duplicate
Status: newclosed

Duplicate of #5069.

comment:2 Changed 7 years ago by Scott González

Milestone: TBD

Milestone TBD deleted

Note: See TracTickets for help on using tickets.