Устранение неполадок в jQuery / jqGrid, не отображающих проблему

Question

Я пытаюсь получить пример jqgrid для отображения на моей локальной машине.Я не пытаюсь сделать что-то необычное, а просто пытаюсь заставить сетку появляться.Я почти не касался javascript (и хотел бы, чтобы я так и продолжал), но я чувствую, что это моя лучшая надежда на получение данных в проекте Pet Django для отображения в сетке.Я пытаюсь использовать firebug, и он настроен на остановку из-за ошибок.Я получаю 1 ошибку, которая не имеет ничего общего с jqgrid.Может ли кто-нибудь указать мне правильное направление, как я могу отследить, почему страница просто ничего не загружает и ничего не дает?Помимо ссылок на мои собственные локальные версии скриптов, я в основном скопировал код из примера jquery, чтобы убедиться, что он работает, прежде чем я настроил его под свои нужды.У меня также есть другие jquery вещи по другим причинам, отсюда и большое количество ссылок на javascript в верхней части моего кода.

Единственная ошибка, которую я вижу в firebug, - это следующая ошибка, которая есть в jquery-ui-1.8.5.

b.ajaxOptions.success is not a function

Я получаю пример кода от здесь в разделе Загрузка данных -> Массив данных.

Мой код выглядит следующим образом,Я предполагаю, что это что-то простое, но мне надоело выдергивать волосы, и я хочу вернуться к работе с django вместо javascript nest.Я подтвердил, что могу получить доступ ко всем ссылкам на скрипты сверху, так что, может быть, я слепо пропускаю одну?Хотя было бы неплохо где-то увидеть ошибку, чтобы я знал, с чего начать.Я слишком много времени выдергивал свои волосы по такому простому вопросу.Большое спасибо за любые советы / идеи.

    <link type="text/css" href="http://localhost/media/jquery-ui/css/dark-hive/jquery-ui-1.8.5.custom.css" rel="stylesheet" /> 
<link rel="stylesheet" type="text/css" media="screen" href="http://localhost/media/jqGrid/src/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://localhost/media/jqGrid/src/css/ui.multiselect.css" />

<script type="text/javascript" src="http://localhost/media/jquery-ui/js/jquery-1.4.4.js"></script> 
<script type="text/javascript" src="http://localhost/media/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script> 
<script type="text/javascript" src="http://localhost/media/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script> 
<script type="text/javascript" src="http://localhost/media/jquery-ui/development-bundle/ui/jquery.ui.tabs.js"></script>

<script type="text/javascript" src="http://localhost/media/jquery-ui/js/jquery-ui-1.8.5.custom.min.js"></script>

<script type="text/javascript" src="http://localhost/media/jqGrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="http://localhost/media/jqGrid/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
    jQuery.jgrid.no_legacy_api = true;
    jQuery.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://localhost/media/jqGrid/src/ui.multiselect.js"></script>
<script type="text/javascript" src="http://localhost/media/jqGrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="http://localhost/media/jqGrid/src/jquery.layout.js"></script>
<script type="text/javascript" src="http://localhost/media/jqGrid/src/jquery.contextmenu.js"></script>


<script type="text/javascript">

jQuery("#list4").jqGrid({
    datatype: "local",
    height: 250,
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'id',index:'id', width:60, sorttype:"int"},
        {name:'invdate',index:'invdate', width:90, sorttype:"date"},
        {name:'name',index:'name', width:100},
        {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
        {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},     
        {name:'total',index:'total', width:80,align:"right",sorttype:"float"},      
        {name:'note',index:'note', width:150, sortable:false}       
    ],
    multiselect: true,
    caption: "Manipulating Array Data"
});
var mydata = [
    {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
    {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
    {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
    {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
    {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
    {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
    {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
    {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
    {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
for(var i=0;i<=mydata.length;i++)
    jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);

jQuery(function() {
    jQuery("#tabs").tabs({
        ajaxOptions: {
            error: function(xhr, status, index, anchor) {
                jQuery(anchor.hash).html("If you're reading this then something didn't go right....oops.");
            }
        }
    });
});
</script>

Тогда в HTML у меня есть.

<table id="list4"></table>

Answer 1

Вы допустили много мелких ошибок:

1. Все файлы JavaScript должны быть включены только один раз.Вы скачали, например, jquery.ui.core.js, а затем jquery-ui-1.8.5.custom.min.js, которые включают его.Вы загрузили jquery.jqGrid.min.js twic и т. Д.
2. grid.locale-en.js должно быть включено перед jquery.jqGrid.min.js
3. Вы должны поместить весь код JavaScript, который вы написали, в телофункции jQuery(document).ready(function () {/*you code mus be here*/});.
4. Вам лучше использовать параметр data в jqGrid вместо использования метода addRowData .Если вы используете addRowData метод, вы должны исправить свой код от i<=mydata.length до i<mydata.length.

Обновленную версию своего кода вы можете увидеть здесь .