Question

I’m trying to create a tab set using jQuery UI that has some permanent tabs as well as some special purpose tabs. The special tabs are added temporarily: when the form they contain is submitted, the tabs are removed.

I’ve got this working except for one thing: after a tab is removed, if it is re-added later its content isn’t shown, and I can’t figure out why. I’ve distilled it down to this jsFiddle example, code also reposted below.

HTML:

<div id="tabs">
    <ul>
        <li><a href="#foo">Foo</a></li>
    </ul>
    <div id="foo">
        <h2>Foo Tab</h2>
    </div>
    <div id="bar" class="transient" style="display: none">
    <h2><button type="button" class="close" style="float: right"><span class="ui-icon ui-icon-closethick">close</span></button>Bar Tab</h2>
    </div>

    <div id="baz" class="transient" style="display: none">
        <h2><button type="button" class="close" style="float: right"><span class="ui-icon ui-icon-closethick">close</span></button>Baz Tab</h2>
    </div>

</div>

<hr>
<button onClick="openTransientTab('bar', 'Bar')">Add Bar Tab</button>
<button onClick="openTransientTab('baz', 'Baz')">Add Baz Tab</button>

JavaScript:

$('#tabs').find('div.transient').find(".close").live('click', function() {
        var footer_tabs = $('#tabs');
        var tab_id = $(this).closest("div.transient").attr("id");
        var index = footer_tabs.tabs("option", "selected");
        footer_tabs.tabs("select", -1);
        footer_tabs.tabs("remove", index);
});

function openTransientTab(id, title) {
    var footer_tabs = $("#tabs");
    footer_tabs.tabs("select", -1);
    footer_tabs.tabs("select", "#" + id);
    var selected = footer_tabs.tabs("option", "selected");
    if (selected < 0) {
        footer_tabs.tabs("add", "#" + id, title);
        footer_tabs.tabs("select", "#" + id);
    }

    $("#" + id).css("display", "block");
}

$(function() {
        var footer_tabs = $("#tabs");
        footer_tabs.tabs({
                collapsible: true,
                selected: -1
        });
});

Answer 1

When you load the page, the bar and baz tabs are created, but in their style, display is set to none which is why they are not visible originally. Inside the tab, when you hit the X, it actually removes the div for bar and baz completely. When you re-click to add the bar or baz tab after it closes, it recreates the div, but you are not putting anything within it. Add something like the following to once you create the tab.

document.getElementById("bar").innerHtml = whatever you want within it here

Before:

<div id="foo" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
<h2>Foo Tab</h2>
</div>
<div id="baz" class="transient" style="display: none">
<h2>
<button class="close" style="float: right" type="button">
<span class="ui-icon ui-icon-closethick">close</span>
</button>
Baz Tab
</h2>
</div>
<div id="bar" class="transient ui-tabs-panel ui-widget-content ui-corner-bottom" style="display: block;">
<h2>
<button class="close" style="float: right" type="button">
<span class="ui-icon ui-icon-closethick">close</span>
</button>
Bar Tab
</h2>
</div>

After opening and closing both

<div id="foo" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
<h2>Foo Tab</h2>
</div>
<div id="bar" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" style="display: block;"></div>
<div id="baz" class="ui-tabs-panel ui-widget-content ui-corner-bottom" style="display: block;"></div>