jQuery Grid Plugin - jqGridForum

Topic RSS

jqgrid jsp - only grid displayed no data

24/06/2009
14:17

betty

Member

Members

Forum Posts: 22

Member Since:
24/06/2009

Offline

I have been able to setup some simple examples using jqgrid loading data. I can display the grid with data succefully by putting xml data and json string in client side script.

Now the problem I am struggling with is using jqGrid to display the data retrieved from JSP (I have to use java since that is all the project based on).

For the jsp page, I can view the generated json string (on browser) or xml data (view page source) by accessing the files directly. The data are in the correct format since the format are same as my previous worked examples.

http://localhost:8080/examples.....ONData.jsp

http://localhost:8080/examples.....gsData.jsp

But when I specified the url as either one above in the html, only the grid displayed without data.

http://localhost:8080/examples.....dDemo.html

Any thoughts are appeciated. Regards.

Betty

24/06/2009
17:47

bujinwang

Member

Members

Forum Posts: 12

Member Since:
17/06/2009

Offline

Check in browser whether your http://localhost:8080/examples.....ONData.jsp returns valid JSON string and your JSON reader setting matches the format. If the string is not valid JSON or does not match the format specified in yoru jsonReader, it quietly does not show any error.

Burt

25/06/2009
14:20

betty

Member

Members

Forum Posts: 22

Member Since:
24/06/2009

Offline

Hi Burt,

Thanks for the suggestions. Indeed there are some problems about my json string (though it was generated by flexjson and it was valid). I corrected it and put it in the javascript in html, the json string data rended in grid succefully. But I still could not loaded the same json string if it was produced from jsp page.

So here is my test.

I copied the json string generated by http://localhost:8080/examples.....ONData.jsp to jsonGrid4.html. jsonGrid4.html can display the data well. And following is the source.

<html>
<head> <title>jqGrid Demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="/pdb/skins/web20/jqGrid/themes/sand/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/pdb/kins/web20/jqGrid/themes/jqModal.css" />
<link href="/pdb/skins/web20/styles/main.css" rel="stylesheet" type="text/css" />
<link href="/pdb/skins/web20/styles/slimbox2.css" rel="stylesheet" type="text/css" />

// generated by holdingsJSONData.jsp and copied here

var mystr = "{page: '1', records: '6', rows: [{cell:['X-RAY', '46190', '1144', '2127', '17', '49479'], id: '1'},{cell:['NMR', '6846', '849', '146', '6', '7847'], id: '2'},{cell:['ELECTRON MICROSCOPY', '165', '16', '59', '0', '240'], id: '3'},{cell:['HYBRID', '13', '1', '1', '1', '16'], id: '4'},{cell:['other', '108', '4', '4', '9', '125'], id: '5'},{cell:['Total', '53322', '2014', '2337', '33', '57707'], id: '6'}],total: '1'}";

    jQuery(document).ready(function(){
        jQuery("#list").jqGrid({
                datatype: 'jsonstring',
                datastr: mystr,

                colNames:['Exp.Method', 'Proteins', 'Nucleic Acids', 'Protein/NA Complexes', 'Other', 'Total'],
                colModel :[ {name:'em'},
                            {name:'proteins'},
                            {name:'nucleic'},
                            {name:'complexes'},
                            {name:'other'},
                            {name:'total'} ],
                pager: jQuery('#pager'),
                rowNum:10,
                rowList:[10,20,30],
                sortname: 'id',
                viewrecords: true,
                imgpath: '/pdb/skins/web20/jqGrid/themes/sand/images',
                caption: 'Not first JSON grid' });
        });
</script>
</head>
<body>
        <table id="list" class="scroll"></table>
        <div id="pager" class="scroll" style="text-align:right;"></div>
</body>
</html>

Then I replace the following code

    jQuery(document).ready(function(){
        jQuery("#list").jqGrid({
                datatype: 'jsonstring',
                datastr: mystr,

with

        jQuery(document).ready(function(){
            jQuery("#list").jqGrid({
        url:'http://localhost:8080/examples/holdingsJSONData.jsp',
        datatype: 'json',
        mtype: 'POST',

The data just could not load. I am not sure if any piece is missing? I use out.println(s) in holdingsJSONData.jsp to send the json string to browser.

Appreciate suggestions since I have to get it work.

Betty

27/06/2009
11:26

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Using fireBug check the server response.

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

29/06/2009
18:54

betty

Member

Members

Forum Posts: 22

Member Since:
24/06/2009

Offline

Finally, I got the xml data from server side jsp page rendered in grid. 🙂

My solution is to add these two links to ensure the response data in xml format.

response.setContentType("text/xml");

response.setCharacterEncoding("UTF-8");

15/12/2010
16:19

spsmysp

New Member

Members

Forum Posts: 1

Member Since:
15/12/2010

Offline

I had this problem too. Actually, I read this page tried and tried again. But could not get the data shown in json format.

Finally, I found this page:http://www.comanswer.com/quest.....e-as-empty.

The reason that the data can not be shown is that our json format is not strict enough.

reference here: http://simonwillison.net/2006/.....t/11/json/

{page: '1', records: '6', rows: [{cell:['X-RAY', '46190', '1144', '2127', '17', '49479'], id: '1'},{cell:['NMR', '6846', '849', '146', '6', '7847'], id: '2'},{cell:['ELECTRON MICROSCOPY', '165', '16', '59', '0', '240'], id: '3'},{cell:['HYBRID', '13', '1', '1', '1', '16'], id: '4'},{cell:['other', '108', '4', '4', '9', '125'], id: '5'},{cell:['Total', '53322', '2014', '2337', '33', '57707'], id: '6'}],total: '1'}

—————————————————————————————————->>>>>>>>>>>>>>>>>>>>>>

{"page": "1″," records": "6″,"rows": [{"cell":["X-RAY", "46190", "1144", "2127", "17", "49479"],"id": "1″},{"cell":["NMR", "6846", "849", "146", "6", "7847"],"id": "2″},{"cell":["ELECTRON MICROSCOPY", "165", "16", "59", "0", "240"],"id": "3″},{"cell":["HYBRID", "13", "1", "1", "1", "16"], "id": "4″},{"cell":["other", "108", "4", "4", "9", "125"],"id": "5″},{"cell":["Total", "53322", "2014", "2337", "33", "57707"],"id": "6″}],"total": "1″}

maybe, you should replace the " by \" if you place the string above between the " "

PS: I am sorry for some grammer error, my english is pool. Thanks!