JQuery UI Tabs Dynamically Add Tab

Question

Here's my fiddle - http://jsfiddle.net/TTBzk/

I want to click the add tab button and have it automatically add a tab with prechosen content without a dialog window as seen on JQuery UI's manipulation example here - http://jqueryui.com/tabs/#manipulation

I don't know what I'm doing wrong. Any help would be greatly appreciated.

JQuery

$(function() {
    var websiteframe = '<iframe src="browser.html" width="100%" height="100%" allowtransparency="true" frameBorder="0">Your browser does not support IFRAME</iframe>';
    var tabs = $("#tabs").tabs();
    tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
    tabCounter = 2;

    function addTab() {
        var label = tabTitle.val() || "" + tabCounter,
        id = "tabs-" + tabCounter,
        li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
        websiteframe = '<iframe src="browser.html" width="100%" height="100%" allowtransparency="true" frameBorder="0">Your browser does not support IFRAME</iframe>';
        tabs.find(".ui-tabs-nav").append(li);
        tabs.append("<div align='center' id='" + id + "'>" + websiteframe + "</div>");
        tabs.tabs("refresh");
        tabCounter++;
    }

    $("#add_tab").click(function() {
        addTab();
    });
});

HTML

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Home</a> <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></li>
        <li style="float:right;"><a id="add_tab">+</a></li>
    </ul>
    <div id="tabs-1">
        <iframe src="browser.html" width="100%" height="100%" allowtransparency="true" frameBorder="0">
            Your browser does not support IFRAME's
        </iframe>
    </div>
</div>

CSS

#tabs li .ui-icon-close {
    float:left;
    margin:0.4em 0.2em 0 0;
    cursor:pointer;}

#add_tab {
    cursor:pointer;}

div#tabs {
    position:absolute;
    top:0px;
    left:50%;
    width:98%;
    height:98%;
    margin-left:-49.5%;}

div#tabs div {
    display:inline-block;
    padding:0px;
    width:100%;
    height:90%;}

SirDerpington · Accepted Answer · 2013-05-21 20:41:20Z

3

In your addTab function you use this line:

var label = tabTitle.val() || "" + tabCounter;

but you never declare a variable with the name tabTitle

Updated jsfiddle

Changes:

<li>
    <a href="#tabs-1" id="tab_title">Home</a>
... 

var tabTitle = $('#tab_title');

Gave it an ID for testing purpose. Declared variable.

Tabs get now added dynamically. You should of course change the tab headings name. For the <a href> value use .text() and e.g. add tabCounter to it so it becomes Home2 etc.

answered May 21, 2013 at 20:41

SirDerpington

11.5k4 gold badges52 silver badges55 bronze badges

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

1 Comment

SirDerpington Over a year ago

Haha :D Nevermind...I guess this happens to all of us at some point ;)

Collectives™ on Stack Overflow

JQuery UI Tabs Dynamically Add Tab

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related