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

Question

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.

Answer 1

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.

Answer 2

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...