jQuery Grid Plugin - jqGrid

Thanks very much, Oleg.  The problem was that ColdFusion turned the small-case names in my code into capitals: I didn't look closely enough at the JSON it was producing.  I have also changed the server-side code so that it has the correct brackets.  It is now producing the following JSON:

{"total": "1", "page": "1", "records": "2", "rows": [{"1", "GNN", "", "", "", "UK", "editorial@mvn.org.uk", "", "", ""},{"2", "The Courier", "", "", "", "OZ", "ian@courier.net.au", "", "", ""}]}

Unfortunately there seems to be another problem, though: I still get the same CSS errors, and the grid still has no data.  Are these versions of jQuery, jQueryUI and jqGrid compatible with each other?

Thanks again for your help.

With best wishes,

Paul

Dear Oleg,

Thanks again for your help.

Unfortunately I am very confused.  The JSON is coming from a ColdFusion CFC, not a CFM page, so it doesn't have anything added or taken away.  In any case, I have checked it using Dragonfly and Firebug and it corresponds exactly to the format shown in the documentation.  I don't understand why it can be read by your page but not by mine.

I installed the loadError function which you mentioned: this gave the cryptic error "; expected", which is apparently a parsing error.  So instead of creating the JSON as a string and then outputting it from ColdFusion as plain text, I am outputting it as JSON generated by ColdFusion.

This means that instead of:

{"total": "1″, "page": "1″, "records": "2″, "rows": [{"1", "GNN", "", "", "", "UK", "editorial@mvn.org.uk", "", "", ""},{"2", "The Courier", "", "", "", "OZ", "ian@courier.net.au", "", "", ""}]}

I am sending:

"{"total": "1″, "page": "1″, "records": "2″, "rows": [{"1", "GNN", "", "", "", "UK", "editorial@mvn.org.uk", "", "", ""},{"2", "The Courier", "", "", "", "OZ", "ian@courier.net.au", "", "", ""}]}"

This gives no parsing errors.

I am extremely confused and very frustrated.  The first version works (for you) and seems to be correct.  But it gives a parsing error.  The second version doesn't produce a parsing error.  Neither version actually puts any data in the grid.

I have been working on this single problem for an entire week and am absolutely desperate for a solution.  Any help or input would be very much appreciated.

Thanks again for your help.

With best wishes,

Paul

P.S. Here is my entire HTML page with the jqGrid script:

<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<style type="tex/css">
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){
$("#list").jqGrid({
url:'contactInfo.cfc?method=contacts',
datatype: 'json',
colNames:['Name','Street','City','ZIP','Country','Email','Contact Title','Contact First Name','Contact Second Name'],
colModel :[
{name:'Name', index:'name', width:55},
{name:'Street', index:'street', width:90},
{name:'City', index:'city', width:80, align:'right'},
{name:'ZIP', index:'ZIP', width:80, align:'right'},
{name:'Country', index:'country', width:50, align:'right'},
{name:'Email', index:'email', width:50},
{name:'ContactTitle', index:'contactTitle', width:55},
{name:'ContactFirstName', index:'contactFirstName', width:55},
{name:'ContactSecondName', index:'contactSecondName', width:55}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'name',
sortorder: 'asc',
viewrecords: true,
caption: 'Contact Information',
loadComplete: function () {
alert("OK");
},
loadError: function (jqXHR, textStatus, errorThrown) {
alert('HTTP status code: ' + jqXHR.status + '\n' +
'textStatus: ' + textStatus + '\n' +
'errorThrown: ' + errorThrown);
alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
},
jsonReader: {
repeatitems: true,
cell: '',
id: '0'
}
})
});
</script>

</head>

<body>
<table id="list"></table>
<div id="pager"></div>

</body>
</html>

And here is my ColdFusion CFC, which is generating the JSON:

 <cfcomponent hint="Sends contact information in text">

<cffunction name="contacts"
hint="Shows all contacts"
access="remote"
returnformat="plain">
<cfargument name="page"
default="1"
hint="Page we are on">
<cfargument name="rows"
default="10"
hint="Number of rows to show at once">
<cfargument name="sord"
default="name"
required="no"
type="string">
<cfargument name="sidx"
default="asc"
required="no"
type="string">
<cfstoredproc
procedure="showAllContacts"
datasource="crystallake">
<cfprocparam
value="name"
cfsqltype="cf_sql_varchar">
<cfprocparam
value="asc"
cfsqltype="cf_sql_varchar">
<cfprocresult name="showAllContacts">
</cfstoredproc>
<!---Generate the JSON packet based on the showAllContacts query--->
<!---Find start point--->
<cfset start = ((arguments.page - 1) * arguments.rows + 1)>
<!---Find end point--->
<cfset end = (start - 1) + arguments.rows>
<!---Create array to hold values retrieved from database--->
<!---<cfset dbValues = ArrayNew(1)>--->
<cfset dbValues = "">
<!---set up counter - cannot use currentrow, as this is the row number in the query, not in the loop--->
<cfset i = 1>
<!---Loop through query from start to end--->
<cfloop query="showAllContacts" startRow=#start# endRow=#end#>
<cfset dbValues = dbValues & ',{"#id#", "#name#", "#street#", "#city#", "#zip#", "#country#", "#email#", "#contactTitle#", "#contactFirstName#", "#contactSecondName#"}'>
<cfset i = I + 1>
</cfloop>

<!---Remove leading comma from dbValues--->
<cfset dbValues = right(dbvalues, len(dbValues) - 1)>
<!---Add square brackets round dbvalues--->
<cfset dbValues = "[" & dbValues & "]">
<!---Calculate total number of pages--->
<cfset totalPages = ceiling(showAllContacts.recordcount/arguments.rows)>

<!---Add dbValues to the rest of the JSON--->
<cfset strReturn = '{"total": "#totalPages#", "page": "#arguments.page#", "records": "#showAllContacts.recordcount#", "rows": #dbValues#}'>
<cfreturn strReturn>
</cffunction>

</cfcomponent>

Dear Oleg,

Once again, thanks very much indeed for your help.

I have set the MIME type in IIS to application/JSON, and have included a tag into my ColdFusion CFC to make absolutely certain that it is sending JSON.  I now get the following in Dragonfly:

HTTP/1.1 200 OK

Transfer-Encoding: chunked

Content-Type: application/json

Server: Microsoft-IIS/7.5

X-Powered-By: ASP.NET

Date: Sun, 27 Nov 2011 18:22:07 GMT

{"total": "1″, "page": "1″, "records": "2″, "rows": [{"1", "GNN", "", "", "", "UK", "editorial@mvn.org.uk", "", "", ""},{"2", "The Courier", "", "", "", "OZ", "ian@courier.net.au", "", "", ""}]}

With Firebug I can only see the header of the page which contains the JavaScript (the first page above) not the CFC which produces the JSON (the second page above).  However, as you can see, Dragonfly seems to think that this is OK.

I checked my JSON at the site you mentioned.  It gives me the parsing error shown below.  However, the JSON is OK according to the Wiki (wiki_retrieving_data).  JSLint produced no errors apart from spacing errors which I have corrected.  I am using WebStorm, which also can't find any errors in my JavaScript.

I am really at a loss.  Do you have any other suggestions?

Thanks again for all your help.

With best wishes,

Paul

[Image Can Not Be Found]

Dear Oleg,

I have changed this, and it works!!  Thanks very much for your help.

I should have remembered that a JS array uses square brackets.  The reason why I changed the brackets from '[' to '{' is because this is what is shown in the documentation:

http://www.trirand.com/jqgridw.....eving_data

>>It is possible to set the cell element to an empty string. And, it is possible to set the id as number. Here is an example of these possibilities: 
jQuery("#gridid").jqGrid({
...
jsonReader : {
root:"invdata",
page: "currpage",
total: "totalpages",
records: "totalrecords",
cell: "",
id: "0"
},
...
});

 >>In this case the id is the first element from the row data 
{
"totalpages" : "xxx",
"currpage" : "yyy",
"totalrecords" : "zzz",
"invdata" : [
{"1","cell11", "cell12", "cell13"},
{"2",,"cell21", "cell22", "cell23"},
...
]
}

ColdFusion produced originally gave me '[': I refactored the code to create the JSON from scratch so I could have '{'.  It seems that ColdFusion was right after all.

Is this a mistake in the documentation, or have I misunderstood something?

Thanks again for your help!

With best wishes,

Paul

Dear Oleg,

Thanks again for all your help!

Paul