Multiple jQgrids in jQueryui Tabs

Question

I am having an issue that I need help with. I have 3 jQueryUI Tabs. The first holds a grid of items. The second holds a grid of Work Orders. The third just fires an alert to verify the show function is working. Problem is I have no grid on the second tab. First one loads fine. If I comment out the code for the first tab, the second grid shows up fine. Third tab fires an alert every time. I have a lightbox that i use to edit items on select which works fine. Here's the 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 any help you can give.

Answer 1

Probably your problem exist because you used the 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 you code a little to the 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;
                                    for (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 which will be used to initialize every grid only once, commented unclear code like onclick = openbox('Edit Work Order', 1); and fixed sortname.

You can see the demo. The grid contain will be not filled, because I not have any server components on the server