JqGrid does not load data

Question

I am using jqGrid to solve my data table. 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 comes 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?

Answer 1

You should probably not create jqGrid inside the click handle. You must do this one time outside, click on the handle and call jQuery("list").trigger('reloadGrid') inside the handler. If at the beginning the data should not be loaded into the grid, you can use datatype: 'local' beginning. If necessary, you can make the jqGrid div sometimes accessible and sometimes invisible using the hide() and show() functions of jQuery. Inside the click handler, you can change the datatype to 'json' relative to setGridParam() , and then call trigger('reloadGrid') . In many situations, you also change some URL parameters before calling trigger('reloadGrid') (see Should you replace using addJSONData jqGrid with using setGridParam () and trigger ('reloadGrid')? ), But you probably don’t need in your case.