In jquery-ui 1.9, how do you create new tabs dynamically?

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

Answer 1

It is annoying that the tabs "add" was removed, however jQuery is very easy to extend. Just add your own addTab method.

e.g. Something like this:

// jQuery extension method
$.fn.addTab = function (name) {
    $('ul', this).append('
' + name + '
');
    $(this).append("
");
    $(this).tabs("refresh");
};

And simply use like this:

$('#tabs').addTab("NewTab");
$('#tabs').addTab("Another NewTab");
$('#tabs').addTab("etc");

JSFiddle: http://jsfiddle.net/TrueBlueAussie/AJDLt/315/

As suggested by @Andy, you need to make it use .first() if you nest tabs in your interface:

e.g. Something like this:

// jQuery extension method
$.fn.addTab = function (name) {
    $('ul', this).first().append('
' + name + '
');
    $(this).append("
");
    $(this).tabs("refresh");
};