JQuery UI Tabs - replace tab and contents

Question

What is the best way to replace the currently selected tab and its contents? The content is dynamically generated with jquery, not loaded via a URL.

I need to do this from outside of any tab code or tab event handler (show, add, etc.). There is a link elsewhere on the page that should do the following when clicked:

• Change the tab's title
• Change the tab's className
• Clear out all elements of the tabcontent div
• Change the tabcontent div's className
• Generate new content inside the tabcontent div

Note that the only reference this link's click() handler has is to the JQuery tabs object ($Tabs). I can get the selected tab with $Tabs.tabs('option','selected'). But how can I get a reference to the selected tab's tab and panel? Inside of a jquery tab handler (show, add, etc.), I have access to ui.tab and ui.panel, but is there a way to get them from a tabs option?

Would it be better to simply remove the currently selected tab and then add a new tab in the same index location? I'd have to put the code to generate the tab content into the add() handler then I suppose.

EDIT: I'm surprised nobody has any suggestions. I have things working by removing the currently selected tab and then adding a new tab in the same location. In a fast browser, this is a decent solution, but in a browser with slow javascript, you can actually see the tab disappear and then a new one appear. It works, but it really isn't optimal.

Answer 1

FWIW - I had the same issue of trying to reference a dynamically created tab content div container to modify the contents. I was able to reference the contents of div container "tabs" with:

<p>
$("#ui-tabs-1").html
</p>

where 1 was the index of the ajax tab whose container I needed to modify. Hopefully that helps you a little.

Answer 2

Not to forget, that the tab-panel (=content) index is NOT zerobased, whereas the selected-tab index is!

so the '1' in '#ui-tabs-1' it is the value of 'ui.index' (= selected tab) + 1!