How to dynamically clone a tab with Jquery

Question

Hello I am working on a web application and I have come stuck on a cloning issue. Basically any time a user selects a checkbox a tab appears. The user can then add details into a table that is on this tab via a dropdown box, search box and an add button.

When the user selects a different checkbox a new tab with a blank table appears next to the previous on. I want the user to be able to have the option of copying from the previous selected tab or starting blank.

Starting blank seems simple I added a link that is shown in the tab, once clicked the link is simply hidden and the tab reminds with the blank table.

$(document).ready(function(){
    $("#tabs").tabs();

    $(".selectedCodeCheckbox").change(function(){
        if ($(this).is(':checked')) {

            // show tab         
            $("#tabs").find(".tabheader-"+$(this).val()).css('display', 'block');
            $("#tabs").find(".tabpanel-"+$(this).val()).css('display', 'block');
            $("#tabs").tabs( "select" , $("#tabs").find(".tabpanel-"+$(this).val()).attr('id'));
            $(".step2").css('display', 'block');
        } else {
            // remove tab
            $("#tabs").find(".tabheader-"+$(this).val()).css('display', 'none');
            $("#tabs").find(".tabpanel-"+$(this).val()).css('display', 'none');
        }
    });

This displays the tab after a checkbox is selected.

<div style="width: 600px; float: left; margin-left: 30px; margin-top: 10px;">
                    <table id="clubListTable_${instanceEntry.key}" class="reports" style="width: 100%;">
                        <thead>
                            <tr>
                                <th>Unit Type</th>
                                <th>Unit Name</th>
                                <th><spring:message code="generic.male" text="Male" /></th>
                                <th><spring:message code="generic.female" text="Female" /></th>
                                <th>
                                    <spring:message code="generic.remove" text="Remove" />
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="emptyRow">
                                <td colspan="5">No Units Added</td>
                            </tr>
                        </tbody>
                        </table>

                </div>

This is the table in the tab that I wish to clone. Each tab is created dynamically from the same <div id="tabs" .

The order in which the tabs is placed is in alphabetical order. There can only ever be 1-6 tabs as there is only 6 checkboxes.

Also if possible could somebody also explain how I would be able to not give the user any options if it is the very first checkbox selected. Also just on a side not a user can select multiple checkboxes to produce multiple tabs.

Answer 1

here i made the sample: http://jsbin.com/welcome/50444/ perhaps an example will help you

<div id="tabs" style="height:300px;">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li id="tab3"><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">content 1</div>
    <div id="tabs-2">content 2</div>
    <div id="tabs-3">content 3</div>
</div>


<script>
  $(function() {
      $("#tabs").tabs();   
  }); 

  function cloneLast(){
    var lastDiv = $('#tabs div:last-child');
    var lastLi = $('#tabs').find('li').last().find('a');   
    $("#tabs").tabs('add','#newTab',lastLi.html());
    $('#newTab').html(lastDiv.html());
  }
</script>  
<a href="#" onclick="if($('#tab3').is(':visible')) $('#tab3').hide(); else $('#tab3').show();">toggle visibility</a>  

<a href="#" onclick="cloneLast()">clone last</a>