Home/ Questions/Q 8477949

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T18:36:31+00:00

I’m trying to get jqGrid to work, for the first time. I’ve copied an

  • 0

I’m trying to get jqGrid to work, for the first time. I’ve copied an example, almost verbatim, and here is my code:

<html>
<head>
<title>hi</title>

<script src="http://code.jquery.com/jquery-1.8.1.min.js" type="text/javascript"></script>

<link type="text/css" href="jquery-ui-bootstrap/css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">

jQuery("#list2").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("#list2").jqGrid('addRowData',i+1,mydata[i]);

</script>

</head>
<body>

hi

<table id="list2"></table>
<div id="pager2"></div>


</body>
</html>

I know that my .js paths are correct, because the javascript console is not throwing any errors. Also, my stylesheet (jquery-ui-bootstrap) does indeed exist in that directory. (When I view-source and then click on the link to that CSS file, chrome correctly navigates me to it.)

The page, however, is only displaying “hi”. Help?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your code is being executed before the table (#list2) is defined.

    There are two easy ways to solve this, either of which will work:

    • Move the JavaScript code to just before the </body> tag.
    • Use jQuery’s document.ready event to execute your code when the whole document has loaded.
    • 0