jqGrid won't load JSON data in Chrome with no errors

Question

I have quite a few working examples of jqGrid, and yesterday I added a new one. It worked fine on my localhost, but when I moved it to my online staging server I'd get the Loading screen, and then nothing. No errors.

Some notes:
1) Using JSON, downloaded all at once
2) Works fine in localhost in the same browser.
3) HTML source looks identical
4) JS source are identical
5) JSON data is identical
6) PHP 5.1 on staging server, PHP 5.3 on local
7) Works in Firefox 3 (issue appears in Chrome 11 on Linux and Windows)
8) Never ran into this before in my other jqGrid setups.

Anybody run into anything like this before? This has really gotten me puzzled, and I don't want to start debugging jqGrid itself.

Edit: Here is my jqGrid call:

jQuery(function(){
  jQuery('#list1').jqGrid({
    url:'/index.php?option=com_coinnet&view=snap&layout=list&Itemid=123&format=json&ajax=1',
    datatype: 'json',
    mtype: 'GET',
    colNames: ["ID","Date","Dealer","Amount","Check Number","Tracking Number","Deal Done","Note?","Date Sort"],
    colModel: [{"name":"id","width":0,"hidden":true,"key":true},{"name":"date_postedstr","width":100,"align":"right","index":"date_posted"},{"name":"stationlink","width":100,"align":"right"},{"name":"amount","width":120,"align":"right","sorttype":"float","formatter":"number","formatoptions":{"decimalSeparator":".","thousandsSeparator":",","decimalPlaces":2}},{"name":"check_number","width":100,"align":"right"},{"name":"tracking_number","width":100,"align":"right"},{"name":"status","width":50,"sortable":false,"align":"right","formatter":"checkbox","formatoptions":{"disabled":"false"}},{"name":"link","width":60,"align":"right","formatter":"showlink","formatoptions":{"idName":"dealID","baseLinkUrl":"","addParam":"&option=com_coinnet&view=snap&layout=deal&Itemid=124"}},{"name":"date_posted","hidden":true,"width":0}],
    pager: '#pager1',
    loadonce:true,
    rowNum:10,
    rowList:[5,10,20,25,30,50,100,-1],
    sortname: 'date_posted',
    sortorder: 'DESC',
    viewrecords: true,
    caption: 'SNAP Deals',
        multiselect:false,jsonReader : {
        root:"data",
        page: "currpage",
        total: "totalpages",
        records: "totalrecords",
        repeatitems: false,
        id: "0"
    },

    loadComplete: function() {
        jQuery("option[value=-1]").text('All');
    },
    height: 'auto',
    });
});

And here is my data:

{"data":[{"id":"1654088","my_name":"CT00","my_id":"11920","other_name":"NV23","date_posted":"2010-12-07 14:23:34","check_number":null,"tracking_number":null,"notes":null,"shipped":"F","paid":"F","status":false,"amount":null,"check_number_date":null,"tracking_number_date":null,"newversion":"F","bulletin_id":null,"original_mailbox_id":null,"parcel_carrier_id":null,"date_postedstr":"12\/07\/2010","link":"Add","stationlink":"<a target='_blank'\n                href='?option=com_coinnet&view=dealerinfo&Itemid=122&station=NV23'>NV23<\/a>"},{"id":"1631050","my_name":"CT00","my_id":"11920","other_name":"FO81","date_posted":"2010-07-13 09:49:10","check_number":null,"tracking_number":null,"notes":null,"shipped":"F","paid":"F","status":false,"amount":null,"check_number_date":null,"tracking_number_date":null,"newversion":"F","bulletin_id":null,"original_mailbox_id":null,"parcel_carrier_id":null,"date_postedstr":"7\/13\/2010","link":"Add","stationlink":"<a target='_blank'\n                href='?option=com_coinnet&view=dealerinfo&Itemid=122&station=FO81'>FO81<\/a>"}],"totalrecords":75,"totalpages=>":8,"currpage":"1","userdata":null}

Answer 1

I figured it out. The answer was really found in this line from the original question:

6) PHP 5.1 on staging server, PHP 5.3 on local

There was an invalid character (shows up as �) in one of the fields of the database that wasn't being escaped properly in PHP 5.1, but was in PHP 5.3.

I'd call this a Chrome bug, since Firefox handled it fine, and Chrome should have at least generated a warning (it didn't crash the page, or crash javascript, or anything like that at all). Its possible that jqGrid itself is suppressing the warning, though.

Answer 2

I am not sure what is the main problem which you has. You code and JSON data has some minor errors which I recommend you to fix. You can try the fixed version here. It works in Chrome 11.

Short list of minor problems which I fixed:

• JSON data contain "totalpages=>":8 instead of "totalpages":8, but because you use loadonce:true parameter the data will be ignored.
• There are trailing comma under the height: 'auto'. It is the syntax error, which can be ignored by some browsers (but not in IE).
• The value -1 in the rowList is wrong. You should use some large integer number instead. For example you can use rowList: [5,10,20,25,30,50,100,10000] and fix the code in the loadComplete to jQuery("#pager1 option[value=10000]").text('All');
• If you use key:true for some grid column the id property of the jsonReader will be ignored.
• I recommend you to use width:1 (or any other positive value) for all hidden column instead of width:0
• The contain of colModel is not JSON data. It is just object initialization. So you don't need to double quote properties name.
• You can remove all default parameters of jqGrid like multiselect:false or mtype: 'GET'
• Instead of the usage of long url parameter url:'/index.php?option=com_coinnet&view=snap&layout=list&Itemid=123&format=json&ajax=1' I recommend you to use url:'/index.php' and postData: {option:"com_coinnet", view:"snap", layout:"list", Itemid:123, format:"json", ajax:1 }. The URL will be constructed the same, but you will be sure, that the special characters (including blanks etc.) which can be inside the parameter values will be correct encoded if needed.

Here is the code of the modified version:

jQuery('#list1').jqGrid({
    url:'LarrikJ.json', // 'index.php'
    postData: {
        option: "com_coinnet",
        view: "snap",
        layout: "list",
        Itemid: 123,
        format: "json",
        ajax: 1
    },
    datatype: 'json',
    colNames: ["ID","Date","Dealer","Amount","Check Number","Tracking Number",
               "Deal Done","Note?","Date Sort"],
    colModel: [
        {name:"id",width:1,hidden:true,key:true},
        {name:"date_postedstr",width:100,align:"right",index:"date_posted"},
        {name:"stationlink",width:100,align:"right"},
        {name:"amount",width:120,align:"right",sorttype:"float",formatter:"number",
         formatoptions:{decimalSeparator:".",thousandsSeparator:",",decimalPlaces:2}},
        {name:"check_number",width:100,align:"right"},
        {name:"tracking_number",width:100,align:"right"},
        {name:"status",width:50,sortable:false,align:"right",formatter:"checkbox",
         formatoptions:{disabled:"false"}},
        {name:"link",width:60,align:"right",formatter:"showlink",
         formatoptions:{idName:"dealID",baseLinkUrl:"",
         addParam:"&option=com_coinnet&view=snap&layout=deal&Itemid=124"}},
        {name:"date_posted",hidden:true,width:1}
    ],
    pager: '#pager1',
    loadonce: true,
    rowNum: 10,
    rowList: [5,10,20,25,30,50,100,10000],
    sortname: 'date_posted',
    sortorder: 'DESC',
    viewrecords: true,
    caption: 'SNAP Deals',
    jsonReader: {
        root: "data",
        page: "currpage",
        total: "totalpages",
        records: "totalrecords",
        repeatitems: false
    },

    loadComplete: function() {
        jQuery("#pager1 option[value=10000]").text('All');
    },
    height: 'auto'
});