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

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" );

Answer 2

You may need to get two other jQuery UI Widgets: Dialog and Position.

I had the same issue: downloaded the demo, and manipulate.html did not work. In my case, it was throwing an error on page load:

$("#dialog").dialog is not a function
   close: function() { 

And the page had 404s: jquery.ui.position.js jquery.ui.dialog.js

So, the page had dependencies that were unexpected, and not included in my custom download. I went back and got another custom download from http://jqueryui.com/download

Once the demo could resolve jquery.ui.dialog.js it worked, because the dialog function existed:

typeof $("#dialog").dialog
"function"

Answer 3

i am also adding tabs dynamically.

mytabs.tabs('add', '/url_for_tab/', 'New tab title');

works in getting that new tab added. in my case its a dynamic jsp file

Answer 4

var main = document.getElementById('main');
var tabber = createMainTab();
tabber.setAttribute("id","tabber")
var mainHelper = createTabHelper();
var testH = createTabHelperElement("Test tab",tabber);
var testTab = createTab(testH);
tabber.appendChild(mainHelper);

mainHelper.appendChild(testH);
tabber.appendChild(testTab);

main.appendChild(tabber);
$(tabber).tabs();

function createMainTab(){
    var mainDiv = document.createElement("div");
    mainDiv.setAttribute("class","ui-tabs ui-widget ui-widget-content ui-corner-all");
    mainDiv.style.height="100%";
    mainDiv.onk_initialised = false;
    return mainDiv;
}
function createTabHelper(){
    var mainUl = document.createElement("ul");
    mainUl.setAttribute("class","ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all");
    return mainUl;
}
function createTabHelperElement(name,mainTab){
    var mainLi = document.createElement("li");
    var active = !mainTab.onk_initialised;
    mainTab.onk_initialised=true;
    if(active){
        mainLi.setAttribute("class","ui-state-default ui-corner-top ui-tabs-selected ui-state-active");
    }else{
        mainLi.setAttribute("class","ui-state-default ui-corner-top");
    }
    mainLi.onk_createdActive = active;
    mainLi.onk_id = "tab_"+cache;
    var oLink = document.createElement("a");
    oLink.setAttribute("href","#tab_"+cache);
    oLink.innerHTML = name;
    mainLi.appendChild(oLink);
    cache++;
    return mainLi;
}
function createTab(tabHelper){
    var tabDiv = document.createElement("div");
    if(tabHelper.onk_createdActive){
        tabDiv.setAttribute("class","ui-tabs-panel ui-widget-content ui-corner-bottom");
    }else{
        tabDiv.setAttribute("class","ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide");
    }
    tabDiv.setAttribute("id",tabHelper.onk_id);
    return tabDiv;
}