I’m trying to return some JSON from my Spring webapp using Jackson and parse it and load it into a jqGrid.
I’ve got the data coming back and visible in Chrome via the JSONViewer extension. It looks correct to me.
Local tests with arraydata have been successful.
Here’s my JSP/HTML/JS:
<link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-darkness/jquery-ui.css' />
<link rel='stylesheet' type='text/css' href='css/jqGrid/ui.jqgrid.css' />
<script type='text/javascript' src='js/jquery-1.7.1.min.js'></script>
<script type='text/javascript' src='js/jquery-ui-1.8.17.custom.min.js'></script>
<script type='text/javascript' src='js/i18n/grid.locale-en.js'></script>
<script type='text/javascript' src='js/jquery.jqGrid.min.js'></script>
<script type='text/javascript'>
$(document).ready(function () {
jQuery("#list").jqGrid({
url:"formSubmit.html",
datatype: "json",
height: 700,
width: 1100,
colNames: ['ReqID', 'Family', 'ControlID', 'Name', 'Description', 'Category','Priority', 'Notes', 'Parent'],
colModel: [
{ name: 'reqID', index: 'reqID', width: 40 },
{ name: 'family', index: 'family', width: 100 },
{ name: 'controlID', index: 'controlID', width: 100 },
{ name: 'reqName', index: 'reqName', width: 175 },
{ name: 'requirement', index: 'requirement', width: 450,cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' } },
{ name: 'category', index: 'category', width: 100 },
{ name: 'priority', index: 'priority', width: 100 },
{ name: 'requirementNotes', index: 'requirementNotes', width: 100 },
{ name: 'parent', index: 'parent', width: 100 }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager',
viewrecords: true,
jsonReader : { repeatitems: false }
});
jQuery("#list").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false });
});
</script>
<table id = 'list'></table>
Here’s some data coming back from my Spring container using Jackson:
{
"total":"1",
"page":"1",
"records":"558",
"rows":[{
"parent":"",
"priority":"",
"requirementNotes":"DummyData",
"category":"DummyData",
"family":"DummyData",
"requirement":"DummyData",
"reqID":"1",
"controlID":"DummyData",
"reqName":"DummyData"}]
}
I’m consistently getting back an Uncaught TypeError cannot read property ‘0’ in undefined as my response in jquery.jqGrid.min.js:23 and I’m stumped.
How you can see from the demo, which uses the JSON data which you posted and your code, the jqGrid should work in general.
I can only repeat the same what I wrote already in my previous comment: the parameter
url:"formSubmit.html"seems to me very suspected. If you call some dynamic components you URL should be either without extension like “/myurl/” or with some other extension as ‘.html’. I recommend you to analyse the HTTP traffic with respect of Fiddler, Firebug or Developer Tools of IE or Chrome (look at “Network” Tab). Important can be not only the HTTP body, but the HTTP headers like “Content-Type”.