CODEWITHSUNDEEP
jqgrid
yelu
yelu

Reputation: 13

simple jqgrid sample can't load data

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>

Upvotes: 1

Views: 5348

Answers (2)

Oleg
Oleg

Reputation: 222007

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.

Upvotes: 2

Eric J.
Eric J.

Reputation: 150148

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?

Upvotes: 1

Related Questions