Removing a dynamically created tab
Hi All,
I have a page with 4 main tabs on it. Each one loads a different page
via the Ajax option.
From links with in one of the tabs it is possible to drill down into
data, the "View" link adds a new tab and loads the items page into the
tab then selects it. This works fine.
However, we want this new tab to be removed again when the user clicks
on any of the 4 main tabs.
I have managed this using the select: event, but it seems to break all
the main tabs at the same time
Add Tab Code
$('.view').click(function(){
var url = '/groups/view/'+$(this).attr('id');
$('#tabs').tabs('add', url, 'View Group', 4);
$('#tabs').tabs('select', 4);
});
Remove Tab Code
$('#tabs').tabs({
select: function(e, ui){
if (ui.index < 4 && $('#tabs').tabs('length') > 4){
$('#tabs').tabs('remove',4);
//alert('removed 4');
}
}
If I use the alert line (commented) then everything works (except the
tab isn't removed) however, if I use the actual remove code the tab is
removed, but the other tabs no longer have content and do not load it
if they are clicked.
Hope someone can help
Ta