JQuery UI Nested Tabs - Load AJAX content into a single DIV

Question

All,

I am using JQuery UI Nested tabs. Consider the structure like this: There are 2 Main tabs: Animals, Birds. Under Animals, there are two tabs "Cats", "Dogs". Both the tabs "Cats" and "Dogs" should be loaded via AJAX when clicked.. So, the code for them is something like this:

<div id="fragment-1">
    <ul>
       <li><a href="/public/catstab"><span>Cats</span></a></li>
       <li><a href="/public/dogstab"><span>Dogs</span></a></li>
    </ul>  
</div>

<script type="text/javascript">
$(document).ready(function()
{
    $("#tabs-loading-message").show();
    $('#fragment-1').tabs({cache:false, spinner:''});
});
</script>

When I switch tabs to "Dogs", I noticed that the HTML that was generated for "Cats" tab still exists on the page (in a hidden state, but still accessible) and Vice Versa. So if both tabs have common elements, that would be a problem.. How can I fix it such that there is only one empty Div and it gets loaded and repainted with whatever tab is currently loaded or switched?

Answer 1

Hmm...I could be wrong, but I thought you needed placeholder divs for tab contents of each tab, even if each tab was dynamically loaded. Like so:

<div id="fragment-1">
    <ul>
       <li><a href="/public/catstab#cats"><span>Cats</span></a></li>
       <li><a href="/public/dogstab#dogs"><span>Dogs</span></a></li>
    </ul>  
    <div id="cats"></div> <-- this is placeholder div
    <div id="dogs"></div>
</div>

Note the additional '#' identifiers at the end of the urls.

Answer 2

I answered something somewhat similar. The code from this post loads the content into a content container when you click the tab. Hopefully it will get you going in the right direction.