jquery ui - Multiple jQgrids in jQueryui Tabs -

i having issue need with. have 3 jqueryui tabs. first holds grid of items. second holds grid of work orders. third fires alert verify show function working. problem have no grid on second tab. first 1 loads fine. if comment out code first tab, second grid shows fine. third tab fires alert every time. have lightbox use edit items on select works fine. here's relevant code:

jquery(document).ready(function () {         $('#tabs').tabs({ show: function(event, ui) {     if(ui.index == 0)     {      jquery("#list1").jqgrid({ ... pager: '#pager1', ... jquery("#list1").jqgrid('navgrid','#pager1',{edit:false,add:false,del:false});          }     else if(ui.index == 1)     {      $("#list").jqgrid({ ... pager: '#pager', .... onselectrow: function(id){    if(id){      alert(id);      onclick=openbox('edit work order', 1);     ...      else if(ui.index == 2)     {      alert('tab2');     } } 

i appreciate can give.

probably problem exist because used html code

<div id="tabs-1">    <table id="list1"><tr><td/></tr></table>    <div id="pager1"/> </div> <div id="tabs-2">    <table id="list"><tr><td/></tr></table>    <div id="pager"/> </div> <div id="tabs-3">     <p>bla bla</p> </div> 

instead of

<div id="tabs-1">    <table id="list1"><tr><td/></tr></table>    <div id="pager1"></div> </div> <div id="tabs-2">    <table id="list"><tr><td/></tr></table>    <div id="pager"></div> </div> <div id="tabs-3">     <p>bla bla</p> </div> 

i modified code little following

jquery(document).ready(function () {     var initgrids= [false,false];     $('#tabs').tabs({         show: function (event, ui) {             if (ui.index === 0 && initgrids[ui.index] === false) {                 jquery("#list1").jqgrid({                     url: 'fillgrid.php',                     datatype: 'json',                     mtype: 'get',                     colnames: ['serial', 'type', 'origin', 'subtype', 'refreshdate'],                     colmodel: [                         { name: 'id', index: 'id', width: 55 },                         { name: 'type', index: 'type', width: 90 },                         { name: 'origin', index: 'origin', width: 80, align: 'right' },                         { name: 'subtype', index: 'subtype', width: 80, align: 'right' },                         { name: 'refreshdate', index: 'refreshdate', width: 80, align: 'right' }                     ],                     pager: '#pager1',                     rownum: 10,                     rowlist: [10, 20, 30],                     sortname: 'id', // not 'serial',                     sortorder: 'desc',                     viewrecords: true,                     caption: 'cpe items',                     width: 950                 });                 jquery("#list1").jqgrid('navgrid', '#pager1', { edit: false, add: false, del: false });                 initgrids[ui.index] = true;             }             else if (ui.index === 1 && initgrids[ui.index] === false) {                 $("#list").jqgrid({                     url: 'fillgridwo.php',                     datatype: 'json',                     mtype: 'get',                     colnames: ['job number', 'date', 'system', 'status', 'technician', 'timeframe'],                     colmodel: [                         { name: 'id', index: 'id', width: 55 },                         { name: 'date', index: 'date', width: 90 },                         { name: 'system', index: 'wsystem', width: 80, align: 'right' },                         { name: 'status', index: 'status', width: 80, align: 'right' },                         { name: 'technician', index: 'wname', width: 80, align: 'right' },                         { name: 'timeframe', index: 'time', width: 80, align: 'right' }                     ],                     pager: '#pager',                     rownum: 10,                     rowlist: [10, 20, 30],                     sortname: 'id', // not 'jobno' or 'job number'                     sortorder: 'desc',                     viewrecords: true,                     caption: 'work orders',                     width: 950,                     onselectrow: function (id) {                         //var d;                         if (id) {                             alert(id);                             //??? onclick = openbox('edit work order', 1);                             //??? d = "jobno=" + id;                             $.ajax({                                 url: 'fillwo.php',                                 type: 'post',                                 datatype: 'json',                                 data: {jobno:id},                                 success: function (data) {                                     var id;                                     (id in data) {                                         if (data.hasownproperty(id)) {                                             $(id).val(data[id]);                                         }                                     }                                 }                             });                             $("button, input:submit").button();                         }                         jquery('#list').editrow(id, true);                     }                 });                 jquery("#list").jqgrid('navgrid', '#pager', { edit: false, add: false, del: false });                 initgrids[ui.index] = true;             }             else if (ui.index === 2) {                 alert('tab2');             }         }     }); }); 

i included array initgrids used initialize every grid once, commented unclear code onclick = openbox('edit work order', 1); , fixed sortname.

you can see the demo. grid contain not filled, because not have server components on server