jqGrid is not loading data

Question

I am using jqGrid for my data table solution. Below are the configuration codes.

$(function() {
    $("#submitInput").click(function() {
        alert("I am called...")
        jQuery("#list").jqGrid({
            datatype: "json",
            url: "http://localhost:1201/admin/someURL.htm",
            mtype:"POST",
            height: "auto",
            colNames:["Column 1", "Column 2", "Column 3", "Column 4", "Column 5"],
            colModel:[
                {name:"col1", index:"col1", sortable:true, resizable:false},
                {name:"col2", index:"col2", sortable:true},
                {name:"col3", index:"col3", sortable:false, resizable:false},
                {name:"col4", index:"col4", sortable:true, resizable:false},
                {name:"col5", index:"col5", sortable:true, resizable:false}
            ],
            sortname:'col1',
            sortorder:'asc',
            pager: $('#pager'),
            rowNum:10,
            viewrecords: true,
            rowList:[10,20,30],
            caption: 'Some Grid Values',
            jsonReader: {
                root: "responseData",
                page: "currentPage",
                total: "totalPages",
                records: "totalFetchedRecords",
                repeatitems: true,
                cell: "rowContent",
                id: "rowID"
            },
            gridComplete: function() {
                alert("Loading done...");
            }
        });
    });
});

My JSON data is coming in the following format:

"currentPage":"1","responseData":[
    {"rowContent":["Col1_Val_000001","Col2_Val_1","Col3_Val_1","Col4_Val_1","Col5_Val_1"],"rowID":"Col1_Val_000001"},
    {"rowContent":["Col1_Val_000002","Col2_Val_2","Col3_Val_2","Col4_Val_2","Col5_Val_2"],"rowID":"Col1_Val_000002"}
], "totalFetchedRecords":"50","totalPages":"5"}

In my HTML, there is a button with id "submitInput" and a table with id "list".

Somehow, this data is not loaded into the grid. What is the reason?

score 0 · Answer 1 · edited May 23 '17 at 10:32

Probably you should don't create jqGrid inside of click handle. You should do this one time outside of click handle and call jQuery("list").trigger('reloadGrid') inside of the handler. If at the beginning the data should be not loaded in the grid, you can use datatype: 'local' an the beginning. If it needed, you can makes div with jqGrid sometimes visitable and sometimes invisible using using hide() and show() jQuery functions. Inside of click handler you can change the datatype to 'json' with respect of setGridParam() and then call trigger('reloadGrid'). In a lot of situation you also change some parameters of URL before calling trigger('reloadGrid') (see Should one replace the usage addJSONData of jqGrid to the usage of setGridParam(), and trigger('reloadGrid')?), but probably you need it not in your case.

jqGrid is not loading data

1 Answers1

Linked