jQuery Grid Plugin - jqGrid

Hi,

I've installed jqrid 3.3 on my ASP page, using JSON as data type.

when the page is loading I'm getting:   $("#list").jqGrid is not a function

till now no direction and no info on the net.

any comment?

I've pasted here the code I've used:

HTML

<link rel="stylesheet" type="text/css" media="screen" href="/backoffice/jqGrid/themes/basic/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/backoffice/jqGrid/themes/jqModal.css" />

<script language="JavaScript" src="/backoffice/jqGrid/jquery.jqGrid.js" type="text/javascript"></script>
<script language="JavaScript" src="/backoffice/jqGrid/js/jqModal.js" type="text/javascript"></script>
<script language="JavaScript" src="/backoffice/jqGrid/js/jqDnR.js" type="text/javascript"></script>

<script language="javascript">

 $(document).ready(function(){
       
    $("#list").jqGrid({
   
            url:'users_data.asp?query=username_~sha10109~',
            datatype: 'json',
            mtype: 'GET',
            root: 'rows',
            colNames:['#','Username', 'First name','Last name','Country','Sex','Age','Email','Info'],
            colModel :[
              {name:'row', index:'row', width:20},
              {name:'username', index:'username', width:90, sortable:true},
              {name:'fname', index:'fname', width:100, align:'left', sortable:true},
              {name:'lname', index:'lname', width:100, align:'left', sortable:true},
              {name:'country', index:'country', width:100, align:'left', sortable:true},
              {name:'sex', index:'sex', width:30, align:'left', sortable:false},
              {name:'age', index:'age', width:30, align:'left', sortable:false},
              {name:'email', index:'email', width:120, align:'left', sortable:false},
              {name:'info', index:'info', width:100, align:'left', sortable:false}
            ],
            pager: $('#pager'),
            rowNum:10,
            rowList:[10,20,30],
            sortname: 'id',
            sortorder: 'desc',
            loadonce: false,
            viewrecords: true,
            imgpath: 'jqGrid/themes/basic/images',
            caption: 'Users List'
           
  }) ;
 
    });

</script>

<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>