[jQuery] $().jqGrid is not a function
Hi. I'm making my first attempt at utilizing JQGrid with a CGIDEV2
application. When loading the page, I keep getting an error that says
$("#results').jqGrid is not a function.
Here's my JS:
$(document).ready(function()
{
var columnNames = ['Product Group','Description','Turnover
Rate','Gross Margin','Rating'];
var columnModel = [
{name:'productGroup',index:'order asc',width:70,align:"center"},
{name:'description',index:'job',width:200,sortable:false},
{name:'itemClass',index:'purchaseOrder',width:
150,sortable:false}];
var gridwidth = $('.tableContainer').width();
gridwidth = gridwidth-25;
$("#results").jqGrid(
{
url: "turnover2",
datatype: "json",
mtype: 'GET',
colNames: columnNames,
colModel: columnModel,
pager: jQuery('#pager2'),
rowNum:20,
rowList:0,
imgpath:"images/images",
sortname:'Product Group',
sortorder:"desc",
viewrecords:true,
multiselect: true,
width:gridwidth,
height:'100%',
loadComplete: function()
{
//$('#cb').prev().remove();
if($("#results").getGridParam("records")==0)
{
$('#noResults').dialog("open");
}
else
{
var page = $('#results').getGridParam("page");
var records = $('#results').getGridParam("records");
var recordsPP = $('#results').getGridParam("rowNum");
var x = records/recordsPP;
var returnArray = [];
if(x < page)
{
iterLimit = records%recordsPP;
}
else
{
iterLimit = recordsPP;
}
for(var i=1; i<=iterLimit; i++)
{
$('#'+i).children('td:first').next().addClass('link');
var ord = $('#'+i).children('td:first').next().text();
returnArray = orderList.find(ord);
var truefalse = typeof returnArray;
if(truefalse != 'boolean')
{
$('#results').setSelection(i);
}
$('#'+i).children('td:first').next().click(function()
{
ord = $(this).text();
window.location.href = "turnover2";
});
}
}
},
shrinkToFit: true,
jsonReader :
{
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems : false
}
});
});
Here's my HTML:
<div class="tableContainer">
<div class="searchResults" id="table">
<table id="results" class="scroll" cellpadding="0"
cellspacing="0">
</table>
<div id="pager2" class="scroll" style="text-
align:center;"></div>
</div>
</div>
Does anyone know something for me to try here?