jQuery Grid Plugin - jqGridForum

Topic RSS

Related Topics sp_TopicIcon

Can't get jqgrid to read json data

Tags: jqgrid json no data help my first grid

25/08/2013
21:50

jgalak

Member

Members

Forum Posts: 7

Member Since:
22/07/2013

Offline

Still struggling to learn jqgrid, not sure why I'm having so much trouble. Got it working in one instance, and totally not working in another, though the code seems to be almost identical. Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>My First Grid</title>

    <link rel="stylesheet" type="text/css" media="screen" href="http://192.168.1.70/phils/jsgr.....custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="http://192.168.1.70/phils/jsgr.....jqgrid.css" />

    <style>
        html, body {
            margin: 0;
            padding: 0;
            font-size: 75%;
        }
    </style>

    <script src="http://192.168.1.70/phils/jsgr.....9.0.min.js" type="text/javascript"></script>
    <script src="http://192.168.1.70/phils/jsgr.....cale-en.js" type="text/javascript"></script>
    <script src="http://192.168.1.70/phils/jsgr.....rid.min.js" type="text/javascript"></script>

    
    <script type="text/javascript">
        $(function()
        {
            $("#list").jqGrid(
                {
                    url: "http://192.168.1.70/phils/js&quot;,
                    altRows: true,
                    deepempty: true,
                    autowidth: true,
                    ignoreCase: true,
                    dataype: "json",
                    mtype: "GET",
                    jsonReader :
                    {root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "",
id: "0",
}                    ,

                    colNames:  ["Username", "E-Mail"],
                    colModel:  [{ name: "username"}, 
{ name: "email"}],
                    pager: "#pager",
                    rowNum: 20,
                    rowList: [20, 50, 100],
                    sortname: "name",
                    sortorder: "asc",
                    viewrecords: true,
                    gridview: true,
                    autoencode: true,
                    caption: "My first grid"
                });
        });
    </script>

</head>
<body>
    <table id="list"><tr><td></td></tr></table>
    <div id="pager"></div>

</body>
</html>

Here's the JSON (as reformatted by JSONLint):

{
    "total": 1,
    "page": 1,
    "records": 2,
    "rows": [
        {
            "id": 6,
            "username": "jgalak",
            "email": "test1@test2",
            "password": "123",
            "confirmation_code": "123",
            "confirmed": 1,
            "created_at": "2013-07-05 22:06:32",
            "updated_at": "2013-07-05 22:06:32",
            "SCA_Name": "",
            "First_Name": "",
            "Last_Name": "",
            "Book_Areas": "",
            "Local_Office_Name": "",
            "Book_Notes": "",
            "Voice_Notes": "",
            "Personal_Office_Name": "",
            "Brigantia_Office_Name": "",
            "Laurel_Office_Name": "",
            "Address1": "",
            "Address2": "",
            "City": "",
            "ZIP": "",
            "Country": "",
            "Membership_Expire": "0000-00-00",
            "Membership_Number": "",
            "deleted_at": null,
            "Local_Flag": 0,
            "Brigantia_Office_Flag": 0,
            "Laurel_Office_Flag": 0,
            "Local_Office_Branch": 0,
            "Residence_Branch": 0,
            "Name_Exp": 0,
            "Armory_Exp": 0,
            "Field_Exp": 0,
            "Court_Exp": 0,
            "Chancery_Exp": 0
        },
        {
            "id": 7,
            "username": "test1",
            "email": "test@test1",
            "password": "312",
            "confirmation_code": "123",
            "confirmed": 1,
            "created_at": "2013-07-19 16:22:18",
            "updated_at": "2013-07-19 16:22:18",
            "SCA_Name": "Test",
            "First_Name": "Test",
            "Last_Name": "Test",
            "Book_Areas": "",
            "Local_Office_Name": "",
            "Book_Notes": "",
            "Voice_Notes": "",
            "Personal_Office_Name": "",
            "Brigantia_Office_Name": "",
            "Laurel_Office_Name": "",
            "Address1": "",
            "Address2": "",
            "City": "",
            "ZIP": "",
            "Country": "",
            "Membership_Expire": "0000-00-00",
            "Membership_Number": "",
            "deleted_at": "2013-07-19 16:22:18",
            "Local_Flag": 0,
            "Brigantia_Office_Flag": 0,
            "Laurel_Office_Flag": 0,
            "Local_Office_Branch": 0,
            "Residence_Branch": 0,
            "Name_Exp": 0,
            "Armory_Exp": 0,
            "Field_Exp": 0,
            "Court_Exp": 0,
            "Chancery_Exp": 0
        }
    ]
}

I am trying to use the data model from "http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data" where "cell" is set to "" (no separate cell sub array), and pull out only certain columns.

Web console just says "not well formed", but Firebug confirms it's a json response.

I'm sure I'm missing something obvious, pleas help.

25/08/2013
22:28

jgalak

Member

Members

Forum Posts: 7

Member Since:
22/07/2013

Offline

If it's easier, you can hit the page "live". The grid is here: http://173.2.2.155:2222/phils/jq

26/08/2013
08:27

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

You have a typo in grid parameters:

Change

dataype: "json", to

datatype: "json",

Regards

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.

27/08/2013
04:41

jgalak

Member

Members

Forum Posts: 7

Member Since:
22/07/2013

Offline

Thank you!

I thought it was something stupid... Sigh...

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
42 Guest(s)

Currently Browsing this Page:
1 Guest(s)