I am trying to get a jqgrid example that will appear on my local machine. I am not trying to do something unusual, but just trying to show the grid. I almost never touched javascript ever (and wish I could save it that way), but I feel that this is my best hope for the data in the django pet project to display in a grid. I am trying to use firebug and made it dwell on errors. I get 1 error, which seems to have nothing to do with jqgrid. Can someone point me in a good direction, how can I track why the page just loads absolutely nothing, and the error is nothing? Besides linking to my own local versions of the scripts, I basically copied the code from the jquery example somewhere to make sure it worked,before I set it up to meet my needs. I also have other jquery stuff here for other reasons, so there are a lot of javascript links at the top of my code.
The only error I see in firebug is the following: jquery-ui-1.8.5.
b.ajaxOptions.success is not a function
I get the sample code from here in the section "Loading data -> array data".
My code is as follows. I suppose this is something simple, but I am sick of pulling hair and I want to return with django instead of a javascript socket. I confirmed that I can access all the script links at the top, so maybe I blindly missed one of them? Although it would be nice to see something for the error somewhere, and I knew where to start. I pulled my hair too long due to such a simple problem. Thanks so much for any tips / 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 html I have.
<table id="list4"></table>