jQuery UI: Adding close option to dynamically added tabs

If you want to add tabs dynamically and load data using AJAX. For example, when a node is double clicked in a tree, add a tab for that node and also don't add a duplicate tab. You could do some thing similar to the following:

Have a div with id "sdcMeterTabs". Inside this div, have a ul with id "sdcMeterTabHeader"


In java script:

Call the following when a tree node is double clicked:

function addTab(id, nodeType, nName ){

var idPrefix = nodeType+"_";// nodetype_
var nodeId = idPrefix+id;

//Finds all with an attribute id equals idPrefix+ id
if($("a[id="+idPrefix+ id +"]").length > 0) {
// tab is already loaded so find the href of the tab and load
var addedTab = $("a[id^="+nodeId +"]");
var addedTabHref = $(addedTab).attr("href");
$("#sdcMeterTabs").tabs('select', addedTabHref);
} else {
// tab not loaded so add a new one
$("#sdcMeterTabs").tabs("option", "nodeId",nodeId); // adding nodeId in option
$("#sdcMeterTabs").tabs({ ajaxOptions: { cache: false } });//cache fase for IE
$("#sdcMeterTabs").tabs("add", "metering/grid/newtab.jsf", nName); // Use URL for your tab content

}

return false;
}

Call the following from $(document).ready(function ()

function initializeTabs(){

//tabs init with a custom tab template and an "add" callback filling in the content
var $tabs = $('#sdcMeterTabs').tabs({
ajaxOptions: {
error: function(xhr, status, index, anchor) {
$(anchor.hash).html("Couldn't load this tab.");
}
,spinner: 'Loading...'
,cache: false
}
,cache: false
,idPrefix:""
,event: 'mousedown'
,tabTemplate: '

#{label} Remove Tab

'

,add: function(event, ui) {
//hack to set id on dom so that later, tabs can be manipulated. Specially, want to stop duplicate tab addition
var nodeId = $(this).tabs("option", "nodeId");
ui.tab.id= nodeId;
//select newely opened tab
$(this).tabs('select',ui.index);
return false;
}
,select: function(event, ui) {
$.get("dynamic/meteringBean/setMeterData.jsf?nodeTypeId="+ui.tab.id); //If you want to set some data

}


});

If you want to add Close, Close Other and Close All menu/actions:

function closeAllTabs(){
var tabElement = $('#sdcMeterTabs');
for (var i = tabElement.tabs('length') - 1; i >= 0; i--) {
tabElement.tabs('remove', i);
}
return false;
}

function closeCurrentTab(){
var tabElement = $('#sdcMeterTabs');
var selected =tabElement.tabs('option', 'selected'); // => 0
if(selected >= 0) {
tabElement.tabs('remove', selected);
}
return false;
}

function closeOtherTabs(){
var tabElement = $('#sdcMeterTabs');

var selected = tabElement.tabs('option', 'selected'); // => 0
if(selected >= 0) {
// remove tabs after the selected tab
for (var i = $('#sdcMeterTabs').tabs('length') - 1; i >= 0; i--) {
if(i != selected) {
tabElement.tabs('remove', i);
}
}
}
return false;
}