Question

I am attempting to get a sample jqgrid example to show up on my local machine. I’m not trying to do anything fancy, but just trying to get the grid to show up. I have hardly touched javascript ever (and wish I could keep it that way), but feel this is my best hope at getting the data in a pet django project to show in a grid. I’m trying to use firebug, and have had it set to halt on errors. I receive 1 error which doesn’t appear to be anything to do with jqgrid. Can someone point me in a good direction of how I can track down why the page is simply loading absolutely nothing, and erroring on nothing? Aside from linking to my own local versions of the scripts I basically copied the code from a jquery example somewhere to make sure I had it working before I customized it to meet my needs. I also have other jquery stuff here for other reasons, hence the large number of javascript references at the top of my code.

The only error I’m seeing in firebug is the following which is in jquery-ui-1.8.5.

b.ajaxOptions.success is not a function

I’m getting my example code from here in the Loading Data –> Array Data section.

My code looks like follows. I’m guessing it’s something simple, but I’m getting sick of pulling my hair out and want to get back with the django work instead of the javascript nest. I have verified I can access all of the script links at the top, so maybe I’m blindly missing one? Although it would be nice to be seeing something for an error somewhere so I knew where to begin. I have been pulling my hair out for too many hours on such an apparently simple issue. Thanks much for any advice/ideas.

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

Then in the html I have.

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

Answer 1

You made many small errors:

1. All JavaScript files must be included only once. You downloaded for example jquery.ui.core.js and then jquery-ui-1.8.5.custom.min.js which include it. You loaded jquery.jqGrid.min.js twic and so on.
2. grid.locale-en.js must be included before jquery.jqGrid.min.js
3. You should place all JavaScript code which you wrote inside of body of the jQuery(document).ready(function () {/*you code mus be here*/}); function.
4. You should better use data parameter of the jqGrid instead of the usage of addRowData method. If you do use addRowData method, you should fix your code from i<=mydata.length to i<mydata.length.

The updated version of your code you can see here.