jqGrid не будет загружать данные JSON в Chrome без ошибок

Question

У меня довольно много рабочих примеров jqGrid, и вчера я добавил новый. На моем локальном хосте все работало нормально, но когда я переместил его на свой промежуточный сервер, я получил экран загрузки, а затем ничего. Нет ошибок.

Некоторые заметки:
1) Используя JSON, скачал все сразу
2) Отлично работает в localhost в том же браузере.
3) исходный код HTML выглядит идентично
4) Источник JS идентичен
5) Данные JSON идентичны
6) PHP 5.1 на промежуточном сервере, PHP 5.3 на локальном
7) Работает в Firefox 3 (проблема появляется в Chrome 11 в Linux и Windows)
8) Никогда раньше не сталкивался с этим в других моих установках jqGrid.

Кто-нибудь сталкивался с чем-то подобным раньше? Это действительно озадачило меня, и я не хочу начинать отладку самой jqGrid.

Edit: Вот мой вызов jqGrid:

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',
    });
});

А вот мои данные:

{"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

Я не уверен, что является главной проблемой, которая у вас есть. В вашем коде и данных JSON есть небольшие ошибки, которые я рекомендую вам исправить. Вы можете попробовать фиксированную версию здесь . Работает в Chrome 11.

Краткий список мелких проблем, которые я исправил:

• Данные JSON содержат "totalpages=>":8 вместо "totalpages":8, но поскольку вы используете параметр loadonce:true, данные будут игнорироваться.
• Под height: 'auto' стоит запятая. Это синтаксическая ошибка, которая может игнорироваться некоторыми браузерами (но не в IE).
• Значение -1 в rowList неверно. Вместо этого вы должны использовать большое целое число. Например, вы можете использовать rowList: [5,10,20,25,30,50,100,10000] и исправить код от loadComplete до jQuery("#pager1 option[value=10000]").text('All');
• Если вы используете key:true для некоторого столбца сетки, свойство id jsonReader будет игнорироваться.
• Я рекомендую вам использовать width:1 (или любое другое положительное значение) для всех скрытых столбцов вместо width:0
• Содержимое colModel не является данными JSON. Это просто инициализация объекта. Так что вам не нужно указывать имя свойства в двойных кавычках.
• Вы можете удалить все параметры jqGrid по умолчанию, такие как multiselect:false или mtype: 'GET'
• Вместо использования длинного url параметра url:'/index.php?option=com_coinnet&view=snap&layout=list&Itemid=123&format=json&ajax=1' Я рекомендую использовать url:'/index.php' и postData: {option:"com_coinnet", view:"snap", layout:"list", Itemid:123, format:"json", ajax:1 }. URL будет создан так же, но вы будете уверены, что специальные символы (включая пробелы и т. Д.), Которые могут быть внутри значений параметров, будут корректно закодированы, если это необходимо.

Вот код модифицированной версии:

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'
});

Answer 2

Я понял это. В этой строке действительно был найден ответ из исходного вопроса:

6) PHP 5.1 на промежуточном сервере, PHP 5.3 на локальном

В одном из полей базы данных был недопустимый символ (отображается как ), который не был должным образом экранирован в PHP 5.1, но был в PHP 5.3.

Я бы назвал это ошибкой Chrome, поскольку Firefox прекрасно с ней справился, и Chrome должен был, по крайней мере, сгенерировать предупреждение (это не приводило к падению страницы, падению javascript или чему-либо подобному). Вполне возможно, что сам jqGrid подавляет предупреждение.