simple jqgrid sample can't load data

Question

I'm new to jqGrid, and I tried to make a simple jqGrid working.

I copied the code from http://www.trirand.com/blog/jqgrid/jqgrid.html and put it in a html file, then open it with firefox, but the grid can't load data successfully

here is the html:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://www.trirand.com/blog/jqgrid/themes/redmond/jquery-ui-1.8.1.custom.css"/>
    <link rel="stylesheet" type="text/css" href="http://www.trirand.com/blog/jqgrid/themes/ui.jqgrid.css"/>
    <script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/jquery.js"></script>
        <script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/jquery-ui-1.8.1.custom.min.js"></script>

        <script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/jquery.layout.js"></script>
        <script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
        <script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/ui.multiselect.js"></script>
        <script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
        <script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/jquery.tablednd.js"></script>
        <script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/jquery.contextmenu.js"></script>
    </head>
<body>
    <table id="list2">
        </table><div id="pager2"></div>
</body>
<script type="text/javascript">
    jQuery("#list2").jqGrid({
    url:'http://www.trirand.com/blog/jqgrid/server.php?q=2',
    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: '#pager2',
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    caption:"JSON Example"
});
jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});

</script>
</html>

when I put the url in browser, I can get correct Json String, but when the html calls that url and I observe the response in firebug, the response content is not shown in firebug while the size of the response content is same as direct call — yelu, Jun 14 '12 at 03:44

score 2 · Accepted Answer · answered Jun 14 '12 at 10:23

The code which you posted has many problems.

The first one is the you use url:'http://www.trirand.com/blog/jqgrid/server.php?q=2' which is wrong. You can open the URL in web browser and see the results, but you can't use it in Ajax requests because of important security restrictions known as same origin policy. You can get JSON data only from his own web site. So you can for example to save the data returned by url:'http://www.trirand.com/blog/jqgrid/server.php?q=2' in a file like my.json and use url: 'my.json'. In the case your code will work.

The next problem is that you have to include some form of <!DOCTYPE html ... statement before <html>. It's really important!!! If you don't do this then web browsers will try to simulate the behavior of very old browsers like IE5 in Internet Explorer browsers. Such mode has the name quirks mode.

Next problem is that you code don't hold any HTML standards because you included <script> after the <body>. I recommend you verify you page in some HTML validator like this one.

It is good practice to place JavaScript code inside of $(function(){/*place code here*/});. See jQuery.ready for more details.

True but see `workarounds` in the same link you provided http://en.wikipedia.org/wiki/Same_origin_policy#Workarounds — Eric J., Jun 14 '12 at 16:34
@EricJ.: Of cause one can use JSONP (see [the demo](http://www.ok-soft-gmbh.com/jqGrid/google-tables3.htm) from [the answer](http://stackoverflow.com/a/4326986/315935) or [the demo](http://www.ok-soft-gmbh.com/jqGrid/user781065_jsonp.htm) from [another answer](http://stackoverflow.com/a/9588051/315935)). It's supported in jqGrid in general, but the site where one get the data should support JSONP too. In the question one just get full code from the original jqGrid demo page and tried just get the data from the page too. So the user want just understand how to use jqGrid. It's his first steps. — Oleg, Jun 14 '12 at 17:25
I agree. I added the comment for others who may come across this question to clarify that, in general, one can work around the same origin issue. — Eric J., Jun 15 '12 at 18:38

score 1 · Answer 2 · edited May 23 '17 at 12:21

1

The URL you are calling

http://www.trirand.com/blog/jqgrid/server.php?q=2

is returning an error:

Warning: Division by zero in /home/trirand/public_html/blog/jqgrid/server.php on line 145 Could not execute query.You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '' at line 1

You'll need to get the data query working first :-)

It's probably also worth handling load errors so that you can show a meaningful error message if something goes wrong. There's a full discussion here:

How can I get JQGrid to recognize server sent Errors?

edited May 23 '17 at 12:21

Community

1
1

answered Jun 14 '12 at 03:12

Eric J.

147,927
63
340
553

when the html runs, it actually call this url http://www.trirand.com/blog/jqgrid/server.php?q=2&_search=false&nd=1339643709675&rows=10&page=1&sidx=id&sord=desc – yelu Jun 14 '12 at 03:15
@yelu: You can't "call" per Ajax the [url](http://www.trirand.com/blog/jqgrid/server.php?q=2&_search=false&nd=1339643709675&rows=10&page=1&sidx=id&sord=desc) from another web site as http://www.trirand.com. It's [security restriction](http://en.wikipedia.org/wiki/Same_origin_policy) of Ajax. I recommend you to implement `loadError` callback in all your grids (see [here](http://stackoverflow.com/a/6969114/315935) for details) – Oleg Jun 14 '12 at 08:18

simple jqgrid sample can't load data

2 Answers2