CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-tabs
confused
confused

Reputation: 35

jQuery UI tabs -- Multiple dynamically created tabs, tab content all displays in one tab

I'm working on web app that is supposed retrieve and display information on files that have been processed server side. I'm trying to display the data returned from the server in a tab for each file processed.

What I'm doing is I created a div to serve as container for my tabs, with an empty ul for my tab links:

<div id="fileInfo"><ul id="infoTabs"></ul></div>

And when I receive my data, I first append a new

  • to my ul for each file:

    <li>

    Info for file1

    • And I append a new div inside my fileInfo div for each file:

    <div id="file1">
Info for file1
<br>
<ul>
<li>
Blah blah
<br>
blah blah blah
</li>
</ul>
</div>

    After I've populated all my content, I call the tabs function:

    $("#fileInfo").tabs();

    And in the event that I have multiple files, I'll have a tabs form with tab headers for each file, but all the content from the divs with the file information is in the first tab. If I click the tab headers for the other tabs, the document just jumps down to the portion of that first tab where the div that should be in its own tab is displayed. I look in the HTML tab in Firebug, and it seems to me that everything was populated correctly in the document for the tabs to display correctly:

        <div id="fileInfo" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul id="infoTabs" class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
<a href="#file1">Info for file1</a>
</li>
<li>
<a href="#file2">Info for file2</a>
</li>
</ul>
<div id="file1">
Info for file1
<br>
<ul>
<li>
file1, blah blah
<br>
yackity smackity
</li>
</ul>
</div>
<div id="file2">
Info for file2
<br>
<ul>
<li>
file2, blah blah
<br>
yackity smackity
</li>
</ul>
</div>
</div>

    I'm kind of stuck right now. Any info on what I might be missing would be greatly appreciated.

    Upvotes: 2

    Views: 1325

    Answers (1)

    confused
    confused

    Reputation: 35

    I solved the problem by changing my approach. I created the tabs div with a dummy tab and removed it, then hid the tabs div:

    $("#fileInfo").tabs();
        $("#fileInfo").tabs('remove', 0);
        $("#fileInfo").hide();

    After that, I'd call the tabs add method, and added my file info div to the newly created tab:

    tabs('add', '#'+ fileName, tabTitle);
 $('#'+ fileName).html(cont);

    Upvotes: 1

    Related Questions