CODEWITHSUNDEEP
jqueryjquery-ui
royco
royco

Reputation: 5529

How can I add a tab in jquery-ui Tabs and then select it?

I understand how to add a jquery-ui tab, and I understand how to select a tab by index number, but how can I both add a tab and then select it?

For example, in the following demo you can add a tab, but then you have to click on it for it to be displayed:

http://jqueryui.com/demos/tabs/#manipulation

I'm on jquery 1.4.2 and jquery-ui 1.8rc3.

Upvotes: 0

Views: 3960

Answers (3)

Floris
Floris

Reputation: 1123

The 'length' and 'selected' options has been deprecated and removed now, so to select the last tab (which is the one that has just been added) use

$('#tabs').tabs('option', 'active', -1);

This works because if you specify negative values, the tabs are counted from the end backwards starting at -1.

Upvotes: 3

Brig
Brig

Reputation: 161

Also, you can use this:

      var $tabs = $('#tabs').tabs({
            add: function(event, ui) {
                $tabs.tabs('select', '#' + ui.panel.id);
            }
        });

Docs here: http://docs.jquery.com/UI/Tabs#...immediately_select_a_just_added_tab

However, I'm having a problem where this bit of code only works after the first one that I add... ie: doesn't work for the first one. Can't figure that out...

Upvotes: 0

PetersenDidIt
PetersenDidIt

Reputation: 25620

After you have added the tab like the example just use the select method. You will have to know the index of the tab you just added. If you just added it to the end you can use the length method, if not then you already know the index of the tab because you defined it when you added it.

Upvotes: 2

Related Questions