Данные на стороне сервера Jqgrid не загружаются во второй вкладке Jquery

Question

У меня есть HTML-файл и JS-файл, используя вкладки jqgrid и jquery, имеющие 3 вкладки таблицы. Данные на стороне сервера были загружены правильно на 1-й вкладке, но НЕ загружены на 2-й и 3-й вкладках. Пожалуйста, предложите, что мне здесь не хватает.

$('#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>

Пожалуйста, проверьте этот код, почему данные на стороне сервера как json загружаются только на первой вкладке таблицы jqgrid.

Answer 1

В вашем html-определении есть ошибка, если вы используете html4 или html 5 - тег div не может иметь самозакрывающийся тег. - т.е. определение должно быть изменено на:

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

То же самое относится к элементу данных таблицы td.

Я проверил ваш код, и он отлично работает.

Также вам нужно будет проверить ваши условия

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