JQuery tabs with child tabs
Hello,
I initially have a panel that an unknown number of tabs. During startup the browser receives messages to add new tabs. The immediate child div of each tab <p>tabName</p> except for the very last tab, which I'm going to call it the "Add tab". It has 3 children tabs of which has a couple of tabs inside it, etc.
At this point I can click on the tabs created and see the body of each tab correctly. Even the "Add tab" body displays the children (tabs) correctly and I can click on each of those children tabs and see their contents. As far as jQuery tabs events firing things look very good.
When all the tabs are created (a call from the app server), I do the following to move the contents of the "Add tab" over to the first tab as follows:
var tabId = "tabView_0";
var tabView = jQuery('#myAddTab').clone(true,true).attr('id',tabId);
jQuery('#myAddTab').remove();
jQuery('#tab_1').append(tabView);
...
jQuery('#allTabs').tabs("select",0);
And now the browser displays the page. Visually everything looks perfect, with the first tab displaying all the child tabs, etc. When I view the DOM tree view Firebug, every thing looks great: no child html element under the "Add tab" tab, the first tab has that contents.
Problem #1: when I click on the 2nd child tab (under the parent first tab) nothing happens. Same thing with the 3rd child tab, etc.
Problem #2: when I click on the "Add tab", Firebug shows "uncaught exception: jQuery UI Tabs: Mismatching gragment identifier".
Question: Is there a known problem w/ jQuery tabs with respect to child tabs and cloning like I did above? Or most likely, I'm doing something wrong.
Basically what I'm trying to do is have one view and as the user clicks the parent tabs move the child panel (the div containing the child tabs) over to the new tab.
I'm using JQuery 1.8.7 and tabs 1.8.7
Thanks, Jim