Unable to populate jqGrid from JSON

Question

I want to get an example of jqgrid to work. I did everything "by the book", yet it does not work. If you can spot the fault it would be great. This is based on the demo website over at trirand.

PS: all filepaths have been triple checked. they are all pointing in the right place.

HTML/JS:

<html>
<head>
<title>Example Grid</title>
<!-- Load CSS--><br />
<link rel="stylesheet" href="css/ui.jqgrid.css" type="text/css" media="all" />
<!-- For this theme, download your own from link above, and place it at css folder -->
<link rel="stylesheet" href="jquery-ui-1.8.22.custom/css/smoothness/jquery-ui-1.8.22.custom.css" type="text/css" media="all" />
<!-- Load Javascript -->
<script src="jquery-ui-1.8.22.custom/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.22.custom/js/jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
</head>
<body>
<table id="testgrid"></table>
<div id="exampleGrid"></div>
<script language="javascript">
jQuery("#testgrid").jqGrid({
    url:'test.txt',
    datatype: "json",
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'id',index:'id', width:55},
        {name:'invdate',index:'invdate', width:90},
        {name:'name',index:'name asc, invdate', width:100},
        {name:'amount',index:'amount', width:80, align:"right"},
        {name:'tax',index:'tax', width:80, align:"right"},      
        {name:'total',index:'total', width:80,align:"right"},       
        {name:'note',index:'note', width:150, sortable:false}       
    ],
    rowNum:10,
    rowList:[10,20,30],
    pager: '#examplegrid',
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    caption:"JSON Example"
});
jQuery("#testgrid").jqGrid('examplegrid','#examplegrid',{edit:false,add:false,del:false});
</script>
</body>
</html>

contents of test.txt:

{"page":"1","total":2,"records":"13","rows":[{"id":"13","cell":["13","2007-10-06","Client 3","1000.00","0.00","1000.00",null]},{"id":"12","cell":["12","2007-10-06","Client 2","700.00","140.00","840.00",null]},{"id":"11","cell":["11","2007-10-06","Client 1","600.00","120.00","720.00",null]},{"id":"10","cell":["10","2007-10-06","Client 2","100.00","20.00","120.00",null]},{"id":"9","cell":["9","2007-10-06","Client 1","200.00","40.00","240.00",null]},{"id":"8","cell":["8","2007-10-06","Client 3","200.00","0.00","200.00",null]},{"id":"7","cell":["7","2007-10-05","Client 2","120.00","12.00","134.00",null]},{"id":"6","cell":["6","2007-10-05","Client 1","50.00","10.00","60.00",""]},{"id":"5","cell":["5","2007-10-05","Client 3","100.00","0.00","100.00","no tax at all"]},{"id":"4","cell":["4","2007-10-04","Client 3","150.00","0.00","150.00","no tax"]}],"userdata":{"amount":3220,"tax":342,"total":3564,"name":"Totals:"}}

This string is perfect JSON string, also validated at JSONlint.com

I hope somebody can spot the issue and tell me why my grid does not get populated. thanks.

Do you see your json string sent back in Firebug or similar? — Hazem Salama, Aug 16 '12 at 16:32
console? I just load the top file in chrome. What console do you refer to? — Lorenzo Kuzma, Aug 16 '12 at 16:32
It would be very hard to help you if you cannot determine if the ajax call is successful or not! — Hazem Salama, Aug 16 '12 at 16:34
This jqGrid thingy lost all my respect, from their site down to their javascript source code — Alexander, Aug 16 '12 at 16:44
hsalama - Can you give me any example of how i can check the ajax code? — Lorenzo Kuzma, Aug 16 '12 at 17:32

score 2 · Accepted Answer · answered Aug 16 '12 at 17:15

2

You have some small, but important errors in the code:

You should include <!DOCTYPE html ...> statement before <html> element. In your later code you use XML comments like . So you want probably use XHTML. In the case you should replace <html> to

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

The next problem: you should remove <br /> which can't be used inside of <head>
You should include encoding declared of the document like

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

you should use correct case of ids. Because use used <div id="exampleGrid"></div> you have to use '#exampleGrid' in the later code instead of '#examplegrid'
the code jQuery("#testgrid").jqGrid('examplegrid',...); is wrong and it produces exception because there are no method 'examplegrid' in jqGrid. What you wanted to do is jQuery("#testgrid").jqGrid('navGrid',...);
To absolutely correct XHTML document you should change <table id="testgrid"></table> to <table id="testgrid"><tr><td/></tr></table>

You can verify on validator.w3.org that the demo after the changed have no HTML errors and it displays the data in the grid too.

answered Aug 16 '12 at 17:15

Oleg

220,925
34
403
798

Oleg can u give me a demo on this http://stackoverflow.com/questions/11963496/how-to-get-the-values-of-a-id-column-in-a-jqgrid-from-vb-net-code-behind-page/11974967#comment15989559_11974967 i never worked with code behind. I always used MVC pattern...please? – Piyush Sardana Aug 16 '12 at 17:19
hi oleg. I was actually quick to reply after seeing how it works on your website. This morning i took that code (no changes made) and tried it myself (load the .html in chrome from a folder which also contains the file lorenzokuzma.txt). Just like before, the grid showed but I did not get any data inside. Any clues ? – Lorenzo Kuzma Aug 17 '12 at 04:41
1

@LorenzoKuzma: You should take in the considerations the security restrictions used by specific web browsers. For example if you want to use Ajax to load data from **local file** (not per HTTP/HTTPS from a web server) in Google Chrome you have to start Chrome with additional parameter. So you should close all instances of Chrome and then start it as `chrome.exe --allow-file-access-from-files`. After that Ajax from local files can be used. – Oleg Aug 17 '12 at 05:13
you were correct again. i started chrome with --allow-file-access-from-files and it works now. problem solved. – Lorenzo Kuzma Aug 17 '12 at 05:45
oleg - in your example, i cannot put 20 results per page or go to the page 2 of results. Can you spot why? I looked around but do not know why. – Lorenzo Kuzma Aug 19 '12 at 15:11
@LorenzoKuzma: My demo was only the bugfixing of your code. The demo get the data *from the file*. If the real example goes from the server it should provide the data depend on the page parameter. If you want to load **the whole data** at once (it can be the file too) you can add `loadonce: true` option to jqGrid. In the case the paging will be done locally. – Oleg Aug 19 '12 at 16:21

score 0 · Answer 2 · answered Aug 28 '12 at 23:41

You are missing a json reader, example:

$(function(){ 

$("#list").jqGrid({
url : "<s:url action='tabla-historial-director' />",
datatype: 'json',
jsonReader: {
    root: 'gridModel',
    id: 'idTT',
    repeatitems: false,
},
resize: false,
hidegrid: false,
data: 'trabajosTerminales',
mtype: 'POST',
height: 'auto',
colNames:['No. de Registro', 'Título', 'Tipo', 'Periodo'],
colModel :[ 
  {name:'numRegistro', index:'titulo', search: 'true', stype:'text', align:'center', searchrules:{required:true},  width:100  },
  {name:'titulo', key:'true', index:'titulo', search: 'true', stype:'text', searchrules:{required:true},  width:800  },
  {name:'tipo', key:'true', index:'tipo', search: 'true', stype:'text',align:'center', searchrules:{required:true},  width:100  },
  {name:'periodo', key:'true', index:'titulo', search: 'true', stype:'text', searchrules:{required:true},  width:100  },
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
viewrecords: true,
gridview: true,
caption: 'Trabajos Terminales dirigidos',
}); 

jQuery("#list").navGrid('#pager',{edit:false,add:false,del:false});     
});

score 0 · Answer 3 · answered Nov 18 '12 at 13:21

0

Remove "gridview" from the config. At least it worked for me.

answered Nov 18 '12 at 13:21

ymakux

3,415
1
34
43

Unable to populate jqGrid from JSON

3 Answers3