Dépannage jQuery/jqGrid ne pas afficher le problème

Question

Je tente d'obtenir un exemple d'exemple jqgrid pour apparaître sur ma machine locale. Je n'essaie pas de faire quelque chose de fantaisiste, mais j'essaie juste de faire apparaître la grille. Je n'ai presque jamais touché au javascript (et j'aimerais pouvoir le garder comme ça), mais je pense que c'est mon meilleur espoir d'obtenir les données d'un projet django pour animaux de compagnie dans une grille. J'essaie d'utiliser firebug, et l'ai fait mettre à l'arrêt sur les erreurs. Je reçois une erreur qui ne semble pas être liée à jqgrid. Quelqu'un peut-il me diriger dans une bonne direction de la façon dont je peux traquer pourquoi la page ne charge absolument rien et ne commet aucune erreur? En plus de relier à mes propres versions locales des scripts j'ai fondamentalement copié le code à partir d'un exemple de jquery quelque part pour m'assurer que je l'ai fonctionné avant de le personnaliser pour répondre à mes besoins. J'ai aussi d'autres choses jquery ici pour d'autres raisons, d'où le grand nombre de références javascript en haut de mon code.

La seule erreur que je vois dans firebug est la suivante qui est dans jquery-ui-1.8.5.

b.ajaxOptions.success is not a function 

Je reçois mon code exemple de here dans le chargement de données -> section de données Array.

Mon code ressemble à ceci. Je suppose que c'est quelque chose de simple, mais j'en ai marre de sortir mes cheveux et je veux revenir avec le travail de django au lieu du nid javascript. J'ai vérifié que je peux accéder à tous les liens de script en haut, alors peut-être que j'en manque aveuglément un? Bien qu'il serait agréable de voir quelque chose pour une erreur quelque part, je savais par où commencer. Je me suis arraché les cheveux pendant trop d'heures sur un problème apparemment aussi simple. Merci beaucoup pour tout conseil/idées.

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

Puis dans le html j'ai.

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

Answer 1

Vous avez fait beaucoup de petites erreurs:

1. Tous les fichiers JavaScript doivent être inclus qu'une seule fois. Vous avez téléchargé par exemple jquery.ui.core.js puis jquery-ui-1.8.5.custom.min.js qui l'inclut. Vous avez chargé jquery.jqGrid.min.js twic et ainsi de suite.
2. grid.locale-en.js doivent être inclus avantjquery.jqGrid.min.js
3. Vous devez placer tout le code JavaScript qui vous avez écrit à l'intérieur du corps de la fonction jQuery(document).ready(function() {/*you code mus be here*/});.
4. Vous devriez mieux utiliser le paramètre data du jqGrid au lieu de l'utilisation de la méthode addRowData. Si vous utilisez la méthode addRowData, vous devez corriger votre code de i<=mydata.length à i<mydata.length.

La version mise à jour de votre code, vous pouvez voir here.