Jqgrid server side data not loaded in the second Jquery tab

Question

I have a html file and a js file using jqgrid and jquery tabs having 3 table tabs. Server side data was loaded properly in the 1st tab but NOT loaded in the 2nd and 3rd tab. Please suggest what I'm missing here.

$('#tabs').tabs({ // inside Ajax success callback
activate: function (event, ui) {
    if (jsondata.object1.total > 0) {
        if (ui.newTab.index() === 0 && initGrids[ui.newTab.index()] === false) {
            colD = jsondata.object1.colData; // server Json str
            colN = jsondata.object1.colNames;
            colM = jsondata.object1.colModel;

            jQuery("#list").jqGrid({
                jsonReader: {
                    cell: "",
                    repeatitems: false,
                    root: "colData",
                    id: "0"
                },
                mtype: 'POST',
                datatype: 'jsonstring',
                datastr: colD,
                colNames: colN,
                sortable: true,
                colModel: colM,
                autowidth: true,
                height: '50%',
                pager: jQuery('#pager'),
                rowNum: 50,
                rowList: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1500, 2000, 3000, 4000, 5000],
                viewrecords: true
            });
            initGrids[ui.newTab.index()] = true;
        }
    }

    if (jsondata.object2.total > 0) {
        if (ui.newTab.index() === 1 && initGrids[ui.newTab.index()] === false) {
            colD = jsondata.object2.colData;
            colN = jsondata.object2.colNames;
            colM = jsondata.object2.colModel;

            jQuery("#list2").jqGrid({
                jsonReader: {
                    cell: "",
                    repeatitems: false,
                    root: "colData",
                    id: "0"
                },
                mtype: 'POST',
                datatype: 'jsonstring',
                datastr: colD,
                colNames: colN,
                sortable: true,
                colModel: colM,
                autowidth: true,
                height: '50%',
                pager: jQuery('#pager2'),
                rowNum: 50,
                rowList: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1500, 2000, 3000, 4000, 5000],
                viewrecords: true
            });
            initGrids[ui.newTab.index()] = true;
        }
    }

    if (jsondata.object3.total > 0) {
        if (ui.newTab.index() === 2 && initGrids[ui.newTab.index()] === false) {
            colD = jsondata.object3.colData;
            colN = jsondata.object3.colNames;
            colM = jsondata.object3.colModel;

            jQuery("#list3").jqGrid({
                jsonReader: {
                    cell: "",
                    repeatitems: false,
                    root: "colData",
                    id: "0"
                },
                mtype: 'POST',
                datatype: 'jsonstring',
                datastr: colD,
                colNames: colN,
                sortable: true,
                colModel: colM,
                autowidth: true,
                height: '50%',
                pager: jQuery('#pager3'),
                rowNum: 50,
                rowList: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1500, 2000, 3000, 4000, 5000],
                viewrecords: true
            });
            initGrids[ui.newTab.index()] = true;
        }
    }
}
});
<div id="gridWrapper">
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab1</a></li>
        <li><a href="#tabs-2">Tab2</a></li>
        <li><a href="#tabs-3">Tab3</a></li>
    </ul>
    <div id="tabs-1">
        <table id="list"> // this table works perfectly
            <tr>
                <td/>
            </tr>
        </table>
        <div id="pager"/>
    </div>

    <div id="tabs-2">
        <table id="list2">
            <tr>
                <td/>
            </tr>
        </table>
        <div id="pager2"/>
    </div>

    <div id="tabs-3">
        <table id="list3">
            <tr>
                <td/>
            </tr>
        </table>
        <div id="pager3"/>
    </div>
</div>

Please check this code why server side data as json is only loaded in the first tab of the jqgrid table.

Answer 1

You have a error in your html definition in case you use html4 or html 5 - the div tag can not have self closing tag. - i.e the definition should be changed to:

<div id="gridWrapper">
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab1</a></li>
        <li><a href="#tabs-2">Tab2</a></li>
        <li><a href="#tabs-3">Tab3</a></li>
    </ul>
    <div id="tabs-1">
        grid 1
        <table id="list"> 
            <tr>
                <td><td>
            </tr>
        </table>
        <div id="pager"></div>
    </div>
    <div id="tabs-2">
        grid 2
        <table id="list2">
            <tr>
                <td><td>
            </tr>
        </table>
        <div id="pager2"></div>
    </div>

    <div id="tabs-3">
        grid 3
        <table id="list3">
            <tr>
                <td><td>
            </tr>
        </table>
        <div id="pager3"></div>
    </div>
</div>      

The same apply for the table data element td.

I checked your code and it works perfectly.

Also you will need to check your conditions

if (jsondata.object2.total > 0) {
    if (ui.newTab.index() === 0 && initGrids[ui.newTab.index()] === false) {
    ...