Question

I am dynamically adding tabs to my page using the following script:

var tabs = $("#tabs");
$.each(results, function(index, item) {
    tabs.tabs("add","get_tab_content.aspx?tab=" + item.key, item.value);
});

where results contains json data.

This all works find, except for when I try to get the tab id via the following script:

$("li.ui-tabs-selected").attr("id")

That line returns nothing, as if an id is not set for the tabs in the loop above.

However, that line works fine if I manually type add tabs and ids e.g.

<div id="tabs">
    <ul>
        <li class="tab" id="tab_1"><a href="tab0.htm">Home</a></li>
        <li class="tab" id="tab_2"><a href="tab1.htm">Default</a></li>
    </ul>
</div>

For this manual html, the line $("li.ui-tabs-selected").attr("id") returns either tab_1 or tab_2.

How do I get the id of the tab from when I create tabs using the loop above? I am assuming I need to give them id’s when adding the tabs? But that is just an assumption. If that is the case, how do I give them ids?

Answer 1

It does not add ids because it does not need to.

It uses the index of the tab to identify them.

Why do you need to have an id on them ?

---

update

To add an id for each tab you can do the following (assuming that you use the code you provided in your question where the new tabs are added at the end by default)

tabs.tabs("add","get_tab_content.aspx?tab=" + item.key, item.value)
    .find('>ul>li:last') // find the last li element, the tab we just added
    .attr('id',item.id); // use whatever id you want here ..i assumed you have an id in your json..

example: http://jsfiddle.net/gaby/7Grb8/

---

update 2

if you want to do it with the index, then you should use the var selected = tabs.tabs( "option", "selected" ); as described in the docs