Resurgent Resurgent - 3 months ago 33
jQuery Question

jQuery, Clone DIV and Contents, Append with jQuery Tabs

So 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">


Thanks in anticipation of your assistance

Answer

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);
 ....
Comments