Tab for dynamically adding jQuery to the user interface

Question

Here is my fiddle - http://jsfiddle.net/TTBzk/

I want to click the add tabs button and automatically add a tab with pre-selected content without a dialog box, as shown in the example of manipulating JQuery UI here - http://jqueryui.com/tabs/#manipulation

I do not know what I am 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%;} 

Answer 1

In your addTab function addTab you use this line:

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

but you never declare a variable called tabTitle

Updated jsfiddle

Changes:

 <li> <a href="#tabs-1" id="tab_title">Home</a> ... var tabTitle = $('#tab_title'); 

Gave an identifier for testing. Declared variable.

Tabs are now added dynamically. Of course, you should change the name of the tab headers. For the <a href> use .text() and, for example, add tabCounter so that it becomes Home2, etc.