Cant get flexigrid для работы в JQuery Tools Tab

Question

Im довольно новый для jquery и Im с использованием jquery tools for tabs. Я хочу, чтобы на одной из вкладок показывалась flexigrid, но когда я пытаюсь сделать это, Flexigrid не появляется, его просто пустое. Если я настрою flexigrid на отдельной странице за вкладкой, она работает нормально. Ниже приведен код, который не работает. Снова Im new, поэтому, пожалуйста, пройдите!

<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

У меня не возникло проблем при их использовании.

<!-- 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>