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.

Can someone repair the link?

mavis
– mavis

2014-09-15 13:21:54 +00:00
Commented Sep 15, 2014 at 13:21 — mavis
– mavis, Commented Sep 15, 2014 at 13:21

PetersenDidIt · Accepted Answer · 2013-01-21 02:39:31Z

41

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

edited Jan 21, 2013 at 2:39

answered Mar 12, 2010 at 3:25

PetersenDidIt

25.6k3 gold badges69 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Narayana Over a year ago

The add and remove methods have been deprecated as of jQuery 1.9, and removed in 1.10. Use the refresh method instead. jQuery upgrade guide

Morvael Over a year ago

For some reason I couldn't get the "refresh" method to work and had to resort to tabs.tabs("destroy"); tabs.tabs(); - I guess that this is what the refresh method should do. jQuery 1.7.2, jQueryUI 1.8.13 (Maybe I should update those)

Teevus Over a year ago

Why deprecate something that is working perfectly well, and is easy to use and replace it with a method that is more difficult? I'm currently upgrading an old site from jQuery 1.4 to 2.1.4, and it has been far from straightforward... the main difficulties have been all the deprecated jQuery functions!

Not a machine Over a year ago

@Teevus I concur. I am still puzzled as to why the tab methods were removed. They were very clear and easy to use. The new approach is hideous!

user216441 · Accepted Answer · 2010-03-25 15:24:10Z

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

score 0 · Accepted Answer · 2010-03-25 20:12:34Z

0

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

edited Mar 25, 2010 at 20:12

answered Mar 25, 2010 at 15:14

mango

Comments

Monte Hayward · Accepted Answer · 2011-05-04 23:23:44Z

0

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"

answered May 4, 2011 at 23:23

Monte Hayward

4772 silver badges11 bronze badges

Collectives™ on Stack Overflow

how to add and remove jquery tabs dynamically?

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related