jQuery Grid Plugin - jqGridForum

Topic RSS

Related Topics sp_TopicIcon

jqGrid not loading w/ JSON

Tags: json jqgrid Rails

23/07/2010
20:07

jkofoed

New Member

Members

Forum Posts: 2

Member Since:
23/07/2010

Offline

The page loads, the jqGrid loads and flashes on the screen then all I get is the loading... dialog. I am also getting a js error:

u is undefined:

false?s.id:a.p.keyIndex;if(B.length>0&...= "ui-widget-content jqgrow ui-row-'+ line 56 of jquery-jqGrid.js

Here is the jqGrid init call:

$('#fee_payments_table').jqGrid({

url:'/staffonly/employee_features/fee_payments_made_json?end_date=2010-07-24&start_date=2010-07-22',

datatype: "json",

colNames:['Date', 'Account', 'Name', 'Address', 'City', 'State', 'Zip', 'Charge Amount', 'Transaction Note'],

colModel:[

{name:'transaction_date',index:'transaction_date', width:65},

{name:'account',index:'account', width:50},

{name:'name',index:'name', width:50},

{name:'address',index:'street', width:110},

{name:'city',index:'city', width:50},

{name:'state',index:'state', width:30},

{name:'zip',index:'zip', width:40},

{name:'charge_amount',index:'charge_amount', width:40,align:"right"},

{name:'transaction_note',index:'transaction_note', width:275, sortable:false}

rowNum:25,

rowList:[10,25,50,100],

pager: '#pager',

sortname: 'transaction_date',

viewrecords: true,

sortorder: "desc",

caption:"Fee Payments"

});

Here is the JSON (partial) object:

{

total: "2"
page: "1"
records: "68"-

rows: [

{
- city: "Buffalo Grove"
- address: "350 McHenry Road "
- zip: "60089"
- account: "31925"
- charge_amount: 99
- state: "IL"
- name: "Bill Feldgreber"
- transaction_note: "This transaction has been approved"
- transaction_date: "01-22-2010"
}
{
- city: "Ontario"
- address: "7689 Chapman Dr "
- zip: "14519"
- account: "05824"
- charge_amount: 410.88
- state: "NY"
- name: "Joseph Crestuk"
- transaction_note: "This transaction has been approved"
- transaction_date: "01-22-2010"
}
{
- city: "Wichita"

- address: "1405 S Hydraulic "
- zip: "67211"
- account: "37079"
- charge_amount: 160.2
- state: "KS"
- name: "Mike Snowbarger"
- transaction_note: "This transaction has been approved"
- transaction_date: "01-30-2010"
}

]

}

28/07/2010
22:45

jkofoed

New Member

Members

Forum Posts: 2

Member Since:
23/07/2010

Offline

UPDATE:

I had an issue with the JSON – I misunderstood the format. Fixed that, now I get blank rows.

$('#fee_payments_table').jqGrid({

url:'<%= url_for(:action => "fee_payments_made_json", :start_date => @start_date, :end_date => @end_date) %>',

datatype: "json",

colNames:['Transaction Date', 'Account', 'Name', 'Address', 'City', 'State', 'Zip', 'Charge Amount', 'Transaction Note'],

colModel:[

{name:'transaction_date',index:'transaction_date', width:65},

{name:'account_number',index:'account_number', width:50},

{name:'name',index:'name', width:50},

{name:'address',index:'street', width:110},

{name:'city',index:'city', width:50},

{name:'state',index:'state', width:40},

{name:'zip',index:'zip', width:40},

{name:'charge_amount',index:'charge_amount', width:40,align:"right"},

{name:'transaction_note',index:'transaction_note', width:275, sortable:false}

rowNum:25,

rowList:[10,25,50,100],

pager: '#pager',

sortname: 'transaction_date',

viewrecords: true,

sortorder: "desc",

caption:"Fee Payments"

});

And the JSON object:

{
"total": "11",
"page": "1",
"records": "258",
"rows": [{"id": "1956",
"cell": {"city": "Las Vegas",
"address": "4040 Pioneer Avenue Ste 206 ",
"transaction_note": "This transaction has been approved"
"zip": "89102",
"account": "24811",
"transaction_date": "01-27-2010",
"state": "NV",
"name": "Leslie Haefeli",
"charge_amount": "150.0"
}
...
}]
}

28/07/2010
23:36

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

First of all you have declare 'account_number' as a column name and you data has "account": "24811″. You should make the same name of the filed names.

To make the program working is to produce JSON data in a little format which corresponds the standard jsonReader (see http://www.trirand.com/jqgridw.....#json_data for details) where the data for every row has NO name prefix and position corresponds to the column position

{
"total": "11″,
"page": "1″,
"records": "258″,
"rows": [
    {
      "id": "1956",
      "cell": [
        "01-27-2010",
        "24811",
        "Leslie Haefeli",
        "4040 Pioneer Avenue Ste 206",
        "Las Vegas",
        "NV",
        "89102",
        "150.0",
        "This transaction has been approved"
      ]
    }
    …
]
}

Another way is to add jsonReader : { repeatitems: false } parameter to the jqGrid and produce JSON data like following

{
"total": "11″,
"page": "1″,
"records": "258″,
"rows": [
    {
     "id": "1956",
     "city": "Las Vegas",
     "address": "4040 Pioneer Avenue Ste 206 ",
     "transaction_note": "This transaction has been approved"
     "zip": "89102",
     "account_number": "24811",
     "transaction_date": "01-27-2010",
     "state": "NV",
     "name": "Leslie Haefeli",
     "charge_amount": "150.0"
    }
    ...
]
}

Best regards
Oleg