Impossible d'utiliser flexigrid dans JQuery Tools Onglet

Question

Im assez nouveau pour jquery et Im utilisant jquery tools for tabs. Je veux dans un des onglets pour montrer flexigrid, mais quand j'essaye de faire ceci flexigrid n'apparaît pas, c'est juste vide. Si je configure flexigrid dans une page autonome en dehors de l'onglet, cela fonctionne très bien. Voici le code qui ne fonctionne pas. Encore une fois je suis nouveau alors s'il vous plaît, allez-y doucement!

<ul class="css-tabs"> 
     <li><a href="#details">Account Details</a></li> 
     <li><a href="#accounts">Sub Accounts</a></li> 
     <li><a href="#groups">Groups</a></li> 
     <li><a href="#support">Tickets</a></li> 
    </ul> 

    <div class="css-panes"> 
     <div>Tab 1</div> 
     <div><table id="flex1" style="display:none"></table></div> 
     <div>Tab 3</div> 
     <div>Tab 4</div> 
    </div> 

    <script> 
$(function() { 
$("ul.css-tabs").tabs("div.css-panes > div").history(); 
}); 

$('.flexme1').flexigrid(); 
$('.flexme2').flexigrid({height:'auto',striped:false}); 

$("#flex1").flexigrid 
(
{ 
url: '/accounts_list.php', 
dataType: 'json', 
colModel : [ 
{display: 'ID', name : 'id', width : 45, sortable : true, align: 'center'}, 
{display: 'Username', name : 'username', width : 120, sortable : true, align: 'left'}, 
{display: 'Display Name', name : 'displayname', width : 150, sortable : true, align: 'left'}, 
{display: 'Limit', name : 'accounts', width : 50, sortable : true, align: 'center'}, 
{display: 'Rate', name : 'charge', width : 50, sortable : true, align: 'center'}, 
{display: 'Subs', name : 'subcount', width : 50, sortable : true, align: 'center'} 
], 
searchitems : [ 
{display: 'ID', name : 'id'}, 
{display: 'Username', name : 'username', isdefault: true}, 
{display: 'Display Name', name : 'displayname'} 
], 
sortname: "id", 
sortorder: "desc", 
usepager: true, 
singleSelect: true, 
title: 'Test', 
useRp: true, 
rp: 20, 
showTableToggleBtn: false, 
width: 500, 
height: 250 
}); 
    </script> 

Answer 1

Je n'ai trouvé aucun problème en les utilisant tous les deux.

<!-- Here are the tabs --> 
<ul class="css-tabs"> 
    <li><a href="#details">Account Details</a></li> 
    <li><a href="#accounts">Sub Accounts</a></li> 
    <li><a href="#groups">Groups</a></li> 
    <li><a href="#support">Tickets</a></li> 
</ul> 

<!-- Here is the tab's content --> 
<div class="css-tabs"> 
    <div>Tab 1</div> 
    <div><table id="flex1" style="display:none"></table></div> 
    <div>Tab 3</div> 
    <div>Tab 4</div> 
</div> 

<script type="text/javascript"> 
    // On DOM ready, 
    $(function() { 
     // Setup the tabs. 
     $("ul.css-tabs").tabs("div.css-panes > div").history(); 

     //Setup the Table 
     $("#flex1").flexigrid({ 
     // Make sure, you are pointing to the right page. NO 404. 
     url: '/accounts_list.php', 
     dataType: 'json', 
     colModel : [ 
      {display: 'ID', name : 'id', width : 45, sortable : true, align: 'center'}, 
      {display: 'Username', name : 'username', width : 120, sortable : true, align: 'left'}, 
      {display: 'Display Name', name : 'displayname', width : 150, sortable : true, align: 'left'}, 
      {display: 'Limit', name : 'accounts', width : 50, sortable : true, align: 'center'}, 
      {display: 'Rate', name : 'charge', width : 50, sortable : true, align: 'center'}, 
      {display: 'Subs', name : 'subcount', width : 50, sortable : true, align: 'center'} 
     ], 
     searchitems : [ 
      {display: 'ID', name : 'id'}, 
      {display: 'Username', name : 'username', isdefault: true}, 
      {display: 'Display Name', name : 'displayname'} 
     ], 
     sortname: "id", 
     sortorder: "desc", 
     usepager: true, 
     singleSelect: true, 
     title: 'Test', 
     useRp: true, 
     rp: 20, 
     showTableToggleBtn: false, 
     width: 500, 
     height: 250 
     }); 

    // You can setup all the tables you need here. 

    }); 

</script>