Question

According to the upgrade guide for jquery-ui 1.9 tabs – http://jqueryui.com/upgrade-guide/1.9/#deprecated-add-and-remove-methods-and-events-use-refresh-method – when adding new tabs dynamically, you only have to do something like this:

HTML:

<div id='tabs'>
    <ul>
        <li><a href='#tab1'>#1</a></li>
    </ul>
    <div id='tab1'></div>
</div>
<button id='add-tab'>Add tab</button>

JavaScript:

$(document).ready(function() {
    $("div#tabs").tabs();

    $("button#add-tab").click(function() {

        var num_tabs = $("div#tabs ul li").length + 1;

        $("div#tabs ul").append(
            "<li><a href='#tab" + num_tabs + "'>#" + num_tabs + "</a></li>"
        );

        $("div#tabs").tabs("refresh");
    });                    
});

However when I try change between the newly created tabs, I get the following error in firebug:

jQuery UI Tabs: Mismatching fragment identifier.

If I understand correctly, this error means that the actual tab panel isn’t being created (and thus there’s a mismatch between the nav panel and the tab panel). But the upgrade guide makes no mention of creating a tab panel.

So I’m assuming that either I’m doing it wrong or that the upgrade guide is incomplete. Please clarify.

Interestingly enough, when removing tabs, the upgrade guide says you have to explicitly remove both the list item from the nav panel as well as the tab panel explicitly, so I’m wondering if the same applies to adding tabs.

Answer 1

The guide must be incomplete, you need to add a tab panel

$(document).ready(function() {
    $("div#tabs").tabs();

    $("button#add-tab").click(function() {

        var num_tabs = $("div#tabs ul li").length + 1;

        $("div#tabs ul").append(
            "<li><a href='#tab" + num_tabs + "'>#" + num_tabs + "</a></li>"
        );
$("div#tabs").append(
            "<div id='tab" + num_tabs + "'>#" + num_tabs + "</div>"
        );
        $("div#tabs").tabs("refresh");
    });                    
});

example