[jQuery] $().jqGrid is not a function

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