Skip to main content

Search and Top Navigation

#6247 closed bug (duplicate)

Opened November 01, 2010 02:16PM UTC

Closed November 01, 2010 02:18PM UTC

Last modified October 11, 2012 09:15PM UTC

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:

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>
            <span class="ui-icon ui-icon-close" onclick="javascript: removeTab('#contentTabs', this);"></span>
    <div id="file_1_2" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
        <div class="content">
    <div id="file_1_1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div>

I'm using the following code

    'cache'  : true,
    'spinner': 'Bezig met laden',
    'add'    : function(event, ui) {
        if(ui.index > 0) {
            $(this).tabs('select', '#';
    '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', 
    '    <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>'+

var tabId = 'file_'+fileId+'_';
$('#contentTabs').tabs('option', 'idPrefix', tabId);
createTab('#contentTabs', ';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);
Attachments (0)
Change History (2)

Changed November 01, 2010 02:18PM UTC by scottgonzalez comment:1

resolution: → duplicate
status: newclosed

Duplicate of #5069.

Changed October 11, 2012 09:15PM UTC by scottgonzalez comment:2

milestone: TBD

Milestone TBD deleted