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

[Chuk]

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?