Dynamically added ajax tabs: dynamic IDs?
Hello,
I'm dynamically adding tabs with the .tabs('add') method, and have
some problems since I switched from ui.1.5.2 to 1.6.
With 1.5.2, if I add a tab I specify a label and that label is used to
name the new div.
For example:
var url='path-to-aspx-page.aspx?p1=val&title=MyTab';
var title = 'MyTab';
jQuery('#IntTab > ul').tabs('add', url, title);
would result in a new div id="MyTab", containing the content of my new
tab (the page which url was passed above).
Since when I passed to ui 1.6, I see the div id is no more my label,
but a new dynamic one (e.g. "ui-tabs-252", "ui-tabs-65" and so on),
and my mechanism (see below) to check if a tab with a certain id (e.g.
"MyTab") is already existing fails, because the div has another name.
Is it true that something changed in the way tabs IDs are handled? Is
there a way to force ui to use the id I specify, or should I change
the way I perform my check?
Thanks for any help.
Bye,
al.
Note: my "mechanism" is a function with which I check if that tab
already exists, before adding it. I get existing tabs and use the
final part of the href attribute as my unique-key to check - that is
if a tab with that url is already there, I skin the add -. The check
on url length was necessary due to different behaviour in Firefox and
IE, the latter giving me full urls versus FF giving hrefs.
Here's my code:
function AddNewTab(tabLabel)
{
var cc = jQuery('#MainTab > ul').tabs().children();
for(x=0; x<cc.length;x++)
{
var tn = jQuery(cc[x]).children('a:first').attr('href');
if(tn.length > (tabLabel.length+1))
{
if(tn.substring(tn.length-(tabLabel.length)) == tabLabel)
return(false);
}
else{
if(tn == "#"+tabLabel)
return(false);
}
}
var url = '<%=ResolveUrl("~/path/page.aspx")%>'+"?cmd=2&tabLabel="
+tabLabel;
jQuery('#IntTab > ul').tabs('add', url, tabLabel);
}