how to display jqgrid from url (local data works, url data does not)

Question

I have looked various question/answers on stackoverflow, but haven't found a solution.

When I use the first block of jqgrid code (data is local), the table and the data are displayed.

When I use the second block (data loaded from url), an empty table is displayed.

The strange part is that the local data is the actual content of the url file. So I had assumed that the behavior would be identical.

Why can I not display the data using the url, when the same data, if copied into the code, is displayed?

The HTML (calls mytest.js which contains the jqgrid code):

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="jquery-ui-1.8.23.custom.css" />
   <link rel="stylesheet" href="ui.jqgrid.css" />
   <script src="jquery-1.8.0.min.js"></script>
   <script src="jquery-ui-1.8.23.custom.min.js"></script>
   <script src="grid.locale-en.js"></script>    
   <script src="jquery.jqGrid.min.js"></script>
   <script src="mytest.js" type="text/javascript"></script>
</head>
<body>
<h1>hey</h1>
  <table id="jqgrid"></table>
</body>
</html>

JSON as local data (data displays, [here, edited for brevity]):

var mydata = [
         {"_id": {"$oid": "50a3f962b7718da1a3090fa9"}, 
         "config": {"titlepage": 
                      {"title": "My First Title",
                       "color": true,
                       "fontsize": "42/44",
                      }
                   }
         },
         {"_id": {"$oid": "50a3f962b7718da1a3090faa"}, 
         "config": {"titlepage": 
                      {"title": "My Second Title",
                       "color": true,
                       "fontsize": "42/44",
                      }
                   }
         }
         ];
jQuery(document).ready(function(){
    $('#jqgrid').jqGrid({
        datatype: 'local',
        data: mydata,
        jsonReader: {
            repeatitems : false,
        },
        caption: 'Titlepage Parameters',
        colNames: ['title', 'color','fontsize'],
        colModel: [
            {name: 'config.titlepage.title'},
            {name: 'config.titlepage.color'},
            {name: 'config.titlepage.fontsize'},
        ],
    });
});

JSON via URL (no data displayed). The file mydata.json contains the same data that is used above, but in a local file instead of in the actual js code:

jQuery(document).ready(function(){
    $('#jqgrid').jqGrid({
        url:'mydata.json',
        datatype:"json",
    jsonReader: {
        repeatitems : false,
    },
    caption: 'Titlepage Parameters',
    colNames: ['title', 'color','fontsize'],
    colModel: [
        {name: 'config.titlepage.title'},
        {name: 'config.titlepage.color'},
        {name: 'config.titlepage.fontsize'},
    ],
    });
});

Is this the cross-site scripting JSONP problem? http://stackoverflow.com/questions/2681466/jsonp-with-jquery when you use your debugger, is there anything being blocked in the "network" section? — orolo, Nov 15 '12 at 17:04
no, the json data is there, it just is not displayed in the grid. The html, the js and the json file are all served from the same apache instance. — Tim, Nov 15 '12 at 17:24

score 2 · Accepted Answer · answered Nov 15 '12 at 18:27

First of all I would fix a little your first version of working code. jsonReader will be not used if you use jsonReader. Instead of that it will be used localReader. Additionally I would recommend you always use native id values if the input data have such one. So I would fix the code to the following:

$(function () {
    "use strict";
    var mydata = [
            {
                "_id": {"$oid": "50a3f962b7718da1a3090fa9"},
                "config": {
                    "titlepage": {
                        "title": "My First Title",
                        "color": true,
                        "fontsize": "42/44"
                    }
                }
            },
            {
                "_id": {"$oid": "50a3f962b7718da1a3090faa"},
                "config": {
                    "titlepage": {
                        "title": "My Second Title",
                        "color": true,
                        "fontsize": "42/44"
                    }
                }
            }
        ];
    $('#jqgrid').jqGrid({
        datatype: 'local',
        data: mydata,
        caption: 'Titlepage Parameters',
        gridview: true,
        height: 'auto',
        colNames: ['title', 'color', 'fontsize'],
        colModel: [
            {name: 'config.titlepage.title' },
            {name: 'config.titlepage.color' },
            {name: 'config.titlepage.fontsize' },
        ],
        localReader: {
            id: "_id.$oid"
        }
    });
});

See the first demo.

In case of usage datatype: "json" you need to fix the jsonReader:

$(function () {
    "use strict";
    $('#jqgrid').jqGrid({
        datatype: 'json',
        url: 'Tim2.json',
        caption: 'Titlepage Parameters',
        gridview: true,
        height: "auto",
        //colNames: ['title', 'color', 'fontsize'],
        colModel: [
            {name: 'title', jsonmap: 'config.titlepage.title' },
            {name: 'color', jsonmap: 'config.titlepage.color' },
            {name: 'fontsize', jsonmap: 'config.titlepage.fontsize' },
        ],
        jsonReader: {
            repeatitems: false,
            id: "_id.$oid",
            root: function (obj) {
                return obj;
            }
        }
    });
});

See another demo.

hi Oleg, thanks. I don't understand your second sentence -- jsonReader will not be used when I use ... (datatype: 'local' maybe)? The major missing piece for me was to use the root function in the jsonReader; once I added that, reading from the url was fine. I'll post the minimal code that loaded the data. thanks! — Tim, Nov 15 '12 at 18:53
@Tim: If you use `datatype: 'local'` then you have to use `localReader` instead of `jsonReader` to configure reading. For example to use `_id.$oid` as rowid you should use `localReader:{id:"_id.$oid"}`. I don't commented other changes which I made in the demo, but all there are recommended. It's better to use `{name: 'title', jsonmap: 'config.titlepage.title' }` as `{name:'config.titlepage.title'}`. The `name` will be used in many cases to build ids or as property of objects. The names with "." could produce errors in some parts of jqGrid code. The usage of `gridview: true` improve performance — Oleg, Nov 15 '12 at 19:12
I understand now. I will put all your changes into my final page--the performance and behavior is important! thanks for your help! — Tim, Nov 15 '12 at 20:01

score 0 · Answer 2 · answered Nov 15 '12 at 19:01

Oleg's answer is the full solution.

Here is the modified code which works. That is, the code I originally wrote plus the one change (from Oleg) that successfully loaded the data into the grid. The key for me was to add the root function in jsonReader:

jQuery(document).ready(function(){
    $('#jqgrid').jqGrid({
        url:'mydata.json',
        datatype:"json",
        jsonReader: {
            root: function (obj) { return obj; },
            repeatitems : false,
        },
        caption: 'Titlepage Parameters',
        colNames: ['title', 'color','fontsize'],
        colModel: [
            {name: 'config.titlepage.title'},
            {name: 'config.titlepage.color'},
            {name: 'config.titlepage.fontsize'},
        ],
    });
});

how to display jqgrid from url (local data works, url data does not)

2 Answers2

Linked