Search code examples
jquerytabsappendclone

jQuery, Clone DIV and Contents, Append with jQuery Tabs

I am trying to clone the contents of one tab, and then append it to a DIV which is a jQuery tab, and then refresh it.

This is the code I have:

    $.fn.addDegree = function (tabId, tabLabel) {
            $('#degree_tabs ul[role="tablist"]').append("<li><a href='#" + tabId + "'>" + tabLabel + "</a>");
            var clonedDiv = $('#tabs-1').clone();
            clonedDiv.attr("id", "tabs-"+tabId);
            $('#degree_tabs').append(clonedDiv);                
            $(this).tabs("refresh");
    };

However, this code does not work because the cloned div id becomes "tabs-tabs-2" when it should be "tabs-2" and although the div is appended, it is now visible below tabs-1 when it should not be.

The div element outputted by the clone is this:-

<div class="standard_degree_app tab_overflow ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-tabs-2" aria-labelledby="ui-id-1" role="tabpanel" aria-expanded="true" aria-hidden="false">
Solution

  • Your id seems unique. If you just need tabs-2 which is tabId from above. Just do this

     var clonedDiv = $('#tabs-1').clone();
 clonedDiv.attr("id", tabId);
 ....