Implementing spring portlet mvc + jquery + jqgrid to pull data from database and display it in the jqGrid table.

All the java script and css references are made properly but when it reads my jqgrid code it fails and throws up the below error.

 ERROR:

ub.extend.readyjquery-1.4.4.min.js:29(anonymous function)

jquery.portlet-1.0.js:92mThis.ready (mcg.js:7)

Uncaught TypeError: Object #<Object> has no method 'jqGrid'

My JSP will look like :

<%@ page contentType="text/html" isELIgnored="false" %> 

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<%@ taglib prefix="portlet" uri="http://java.sun.com/portlet" %>

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %><%@ include file="/WEB-INF/jsp/include.jsp" %>

 <portlet:defineObjects/>

<div id="<portlet:namespace />_main">

<!-- Import all the jquery & jqGrid resources -->

<script type="text/javascript" src="<%=renderResponse.encodeURL(renderRequest.getContextPath() + "/resources/js/jqgrid/grid.locale-en.js") %>" ></script>

<script type="text/javascript" src="<%=renderResponse.encodeURL(renderRequest.getContextPath() + "/resources/js/jqgrid/jquery.jqGrid.min.js") %>" ></script>

<script type="text/javascript" src="<%=renderResponse.encodeURL(renderRequest.getContextPath() + "/resources/js/jquery/jquery-1.4.4.min.js") %>" ></script>

<script type="text/javascript" src="<%=renderResponse.encodeURL(renderRequest.getContextPath() + "/resources/js/jquery/jquery-ui-1.8.6.custom.min.js") %>" ></script>

<script type="text/javascript" src="<%=renderResponse.encodeURL(renderRequest.getContextPath() + "/resources/js/jquery-portlet/jquery.portlet-1.0.js") %>" ></script>

<!-- CSS -->

<link rel="stylesheet" type="text/css" media="screen" href="<%=renderResponse.encodeURL(renderRequest.getContextPath() + "/resources/css/jqgrid/ui.jqgrid.css")%>" ></link>

<link rel="stylesheet" type="text/css" media="screen" href="<%=renderResponse.encodeURL(renderRequest.getContextPath() + "/resources/css/jquery/ui-lightness/jquery-ui-1.8.16.custom.css")%>" ></link>

</div>

<div id="<portlet:namespace />_content">

<table id="rosterGrid" ></table>

<div id="roster"></div>

</div>

<script type="text/javascript" src="<%=renderResponse.encodeURL(renderRequest.getContextPath() + "/resources/js/mcguire/mcg.js") %>" ></script>

My js file mcg.js which contains the jqGrid code will look like:

mcg.js

       var McGuirePortlet = function(nameSpace) {

              var mThis = $.Portlet.call(this, nameSpace);

              mThis.ready = function() {

                     // this method is called when $(document).ready is called

                     alert("Coming here");

                     $("#rosterGrid").jqGrid({

url:'<%=renderResponse.encodeURL(renderRequest.getContextPath() + "/roster/grid")%>', 

                           datatype: "json",

                           colNames:['Last Name', 'First Name'],

                           colModel:[

                                  {name:'lastName',index:'firstName asc', width:55},

                                  {name:'firstName',index:'firstName', width:55}  

                           ],

                           rowNum:10,

                           rowList:[10,20,30],

                           pager: '#roster',

                           sortname: 'lastName',

                           viewrecords: true,

                           sortorder: "desc",

                           caption:"JSON Roster Grid"

                     });

                     jQuery("#rosterGrid").jqGrid('navGrid','#roster',{edit:false,add:false,del:false});

              };

              return mThis;

       };

    jQuery.registerPortlet(new McGuirePortlet("<portlet:namespace />"));