0

I have a proof-of-concept JQGrid I have been playing with, but I cannot get it to show data from a webservice that returns JSON. I know it is properly hitting my service, because I can set a break-point and watch it get hit while the page is loading.

The Grid renders, and looks good, but no data is ever shown in it. The code I have for the grid is shown here (I tried to remove all of the complexity that I could):

jQuery("#list4").jqGrid({
        url: 'http://localhost:55555/GetJson',
        datatype: "json",
        colNames: ['-First Name-', '-LastName-'],
        colModel: [
        { name: 'fname', index: 'fname', width: 50},        
        { name: 'lname', index: 'lname', width: 50}
    ],
        caption: "Employees",       
        pager: "#pager2",
        viewrecords: true,
        width: 550
    });     
jQuery("#list4").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false})

My service returns the following JSON (note that I added line breaks for readability):

{"total":5,"page":1,"records":5,"rows":[
{"id":1,"cell":["Andrew","Smith"]},
{"id":2,"cell":["Danny","Johnson"]},
{"id":3,"cell":["Ron","Lewis"]},
{"id":4,"cell":["George","Washington"]},
{"id":5,"cell":["Peter","Davis"]}]}

Like I said, the grid seems to render properly, and when I try to populate it with an array directly in JS, it populates just fine, but it will NOT read my JSON. Any ideas?

This is the HTML I tried locally after I read Oleg's post and copied his sample: It is still not showing any data.

<!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">
<head>
    <title>Just simple local grid</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/css/ui.jqgrid.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/js/jquery.jqGrid.min.js"></script>
    <script type="text/javascript">
    //<![CDATA[
        $(document).ready(function () {
            jQuery("#list4").jqGrid({
                url: 'repdetec.json',
                datatype: "json",
                colNames: ['-First Name-', '-LastName-'],
                colModel: [
                    { name: 'fname', index: 'fname', width: 50},
                    { name: 'lname', index: 'lname', width: 50}
                ],
                caption: "Employees",
                pager: "#pager2",
                viewrecords: true,
                width: 550
            });
            jQuery("#list4").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false})
        });
    //]]>
    </script>
</head>
<body>
    <table id="list4"><tr><td/></tr></table>
    <div id="pager2"></div>
</body>
</html
RepDetec
  • 741
  • 13
  • 29

1 Answers1

0

How you can see here your code work with the data. I suspect that the data returned from the server either not have exactly the same data which you posted or the server response has the wrong content type. I recommend you examine the server response with Fiddler of Firebug.

If you used Microsoft ASMX web service the old answer can probably help you. If you used ASP.NET MVC with EF look at here.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • I viewed your sample, and it looks great. I pulled the html down locally, and changed the URL to the one you were hosting the JSON at, and when I pull it up locally, it still shows a blank grid! The mark-up I am using is shown above. – RepDetec Apr 09 '11 at 23:42
  • @RepDetec: You can get per ajax the data **only from the same web site**. See [Same origin policy](http://en.wikipedia.org/wiki/Same_origin_policy). You should get **both** the HTML and AJAX file locally. It you place there in the same directory or use **relative paths** in the URL it will work. – Oleg Apr 10 '11 at 06:02
  • Ok, so I downloaded the json, and saved it as repdetec.json in the exact same directory as the html file. When I open the HTML locally, it still shows no data. I have updated the HTML above to reflect exactly what I have. It still shows just an empty grid. – RepDetec Apr 10 '11 at 19:22
  • @RepDetec: I tested the demo locally before I placed there on my web site and it works on both places. Which web browser you use for the tests? Do you have any special settings of the web browser? Can you test the same in another web browser or from another computer? Do you see the data if you open my demo from my web site? – Oleg Apr 10 '11 at 19:45
  • I was using chrome, but you're right it seems to work just fine locally in IE and FF. I guess I need to check my settings in Chrome. Thanks for all of your help. – RepDetec Apr 10 '11 at 20:06
  • @RepDetec: In case of chrome you should close all chrome instances and start it with additional parameter: `chrome.exe --allow-file-access-from-files`. Then you will able to read local files per ajax. – Oleg Apr 10 '11 at 20:11
  • @RepDetec: I am not sure that you know the rule which you can read [here](http://stackoverflow.com/faq#howtoask): **As you see new answers to your question, vote up the helpful ones by clicking the upward pointing arrow to the left of the answer**. The accepted answers without voting will not calculated in many statistics (for example not included in the "total score"). One interpret the answer as not helpful. You just closed the question.[Here](http://meta.stackexchange.com/questions/46795/why-are-accepted-answers-not-included-in-the-tag-badge-calculation/) you can read more about the subject – Oleg Apr 10 '11 at 22:09