CODEWITHSUNDEEP
jqueryjquery-uijquery-selectors
JN_newbie
JN_newbie

Reputation: 6082

Contents are not showing in jquery ui tabs

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.

Upvotes: 0

Views: 324

Answers (1)

g.d.d.c
g.d.d.c

Reputation: 48018

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.

Upvotes: 1

Related Questions