how to add and remove jquery tabs dynamically?

Question

hi,

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');
});

Answer 2

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 3

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;
}