Question

I have made a sample of creating a jquery ui tabs, i am creating a dynamic table on a fly and rendering that table in jquery ui tab. but it is only showing the table in the last tab and not showing in the 1st two tabs. below is my code.

<script>
$(document).ready(function(){ 
    var $table = $('<div><table><th>Name</th><th>Age</th>Address<th></th></table></div>');

    var $myDiv = $('<div id="tabs">'+
                        '<ul>'+ 
                            '<li><a href="#tabs-1">Nunc tincidunt</a></li>'+
                            '<li><a href="#tabs-2">Proin dolor</a></li>'+
                            '<li><a href="#tabs-3">Aenean lacinia</a></li>'+
                        '</ul>'+
                            '<div id="tabs-1">'+
                            '</div>'+
                            '<div id="tabs-2">'+        
                            '</div>'+
                            '<div id="tabs-3">'+
                            '</div>'+
                '</div>');
                alert($myDiv);

    $myDiv.appendTo("body");

    $myDiv.tabs();
    $("#tabs-1").append($table);
    $("#tabs-2").append($table);
    $("#tabs-3").append($table);
}); 
</script>

i am just stuck into this, i have also tried appendTo method as well but same problem.

Answer 1

You might try adding append($table.clone()). When you append the single instance of your table to the next section, it removes it from the prior section.