how to add and remove jquery tabs dynamically?

Question

I have an aspx page on which I have 2 static jquery tabs.Upon clicking on a button avaiable on one of these tabs,I would like to add a new tab dynamically,which gets its content loaded from another aspx page.I've also tried with the following sample

http://jquery-ui.googlecode.com/svn/trunk/demos/tabs/manipulation.html

I've downloaded jquery-ui-1.8rc3.custom zip file and tried to add the above page with the relevant script,css files to my asp.net website and run,but it does not seem to work.Also I do not want to have a dialog opening and asking the user to enter the tab title as in the above sample.

Please could someone help me with this?

Thanks.

Answer 1

Have you tried using the add method of the tabs?

var tabs = $("#tabs").tabs();
$('#tabs-1 button').click(function(){
    tabs.tabs('add','/url_for_tab/','New tab');
});

Update -- As of jQuery UI 1.9 the add remove methods have been deprecated and in jQuery UI 1.10 they have been removed.

The correct way to do this for remote (ajax) content tabs now is:

var tabs = $( "#tabs" ).tabs();
var ul = tabs.find( "ul" );
$( "<li><a href='/url_for_tab/'>New Tab</a></li>" ).appendTo( ul );
tabs.tabs( "refresh" );

And for when you already have the content:

var tabs = $( "#tabs" ).tabs();
var ul = tabs.find( "ul" );
$( "<li><a href='#newtab'>New Tab</a></li>" ).appendTo( ul );
$( "<div id='newtab'><p>New Content</p></div>" ).appendTo( tabs );
tabs.tabs( "refresh" );