Problem adding and removing a jquery tab to the existing tabs dynamically.
- by kranthi
hi everyone,
I have a href tag, upon clicking it a new jquery tab is added to the existing tabs,using the following js.
$(function() {
//DECLARE FUNCTION: removetab
var removetab = function(tabselector, index) {
$(".removetab").click(function(){
$(tabselector).tabs('remove',index);
});
};
//create tabs
$("#tabs").tabs({
add: function(event, ui) {
//select newely opened tab
$(this).tabs('select',ui.index);
//load function to close tab
removetab($(this), ui.index);
},
show: function(event, ui) {
//load function to close selected tabs
removetab($(this), ui.index);
}
});
//load new tab
$(".addtab").click(function(){
var href=$(this).attr("href");
var title=$(this).attr("title");
$("#tabs").tabs( 'add' , href , title+' <span class="removetab ui-icon ui-icon-circle-close" style="float:right; margin: -2px -10px 0px 3px; cursor:pointer;"></span>');
return false;
});
});
and
<a class="addtab" title="Tab Label" href="HTMLPage.htm">Add Tab</a>
If the href attribute for 'a' tag corresponds to a '.htm' page I am able to add & remove the tab successfully.Where as if it corresponds to a '.aspx' page I am able to add a new tab ,but unable to remove the tab upon clicking on the 'close' sign next to the tab title.
Please help.
Thanks in advance
