I'm facing a weird problem here.
I've jqGrids placed inside the jQuery tabs. Below is the snapshots:
I'm trying to implement the filter toolbar in my jqgrid. But whenever I enter anything in any one of the filter toolbar search box, the "Loading" pop-up comes and stays there and nothing happens then. Below is the snapshot:
In IE it gives the error:
jQuery.jgrid is null or not an object
In Chrome the error says:
Uncaught TypeError: Cannot call method 'getAccessor' of undefined
When I remove the tabs, the filtertoolbar functionality works fine. Is there any issue between jqGrid filtertoolbar and jQuery tabs.
Update 1
Tabs JSP code:
<script>
$(function() {
$( "#workQueuesTab" ).tabs();
});
</script>
</head>
<body>
<div style="width:95%" id="workQueuesTab">
<ul>
<li><a href="<c:url value="/workQueue/pending"/>">Pending</a></li>
<li><a href="<c:url value="/workQueue/approved"/>">Approved</a></li>
<li><a href="<c:url value="/workQueue/additionalSteps"/>">Additional Steps</a></li>
</ul>
</div>
</body>
Grid JSP code:
<table width="100%">
<tr>
<td>
<span style="font-size: 18px"><b>${status == 'pending' ? 'Pending': 'Approved'}</b></span><br/><br/>
There are ${workQueueCount} referrals ${status}. Click a row to see details.<a href="<c:url value="/excelExport"/>" id="excelExport" style="float: right;">Export To Excel</a>
</td>
</tr>
<tr height="5px">
<td>
</td>
</tr>
<tr>
<td>
<table id="dartWorkQueueGrid"></table>
<div id="dartWorkQueuePager"></div>
</td>
</tr>
</table>
Grid Javascript code:
jQuery(document).ready(function($) {
$('#dartWorkQueueGrid').jqGrid('GridDestroy');
$("#dartWorkQueueGrid").jqGrid({
url:contextRoot+'workQueueGrid',
datatype: 'json',
jsonReader: {repeatitems: false},
mtype: 'POST',
colNames: ['ID','Received','Last Name','First Name','GO','Zone', 'Source', 'Status', 'AS Action', 'VP Report', 'Approved', 'Last Modified', 'Workflow'],
colModel: [
{ name: 'referralId', index: 'referralId', width: 30, sortable:true },
{ name: 'receivedDate', index: 'receivedDate', width: 50, formatter: function(cellValue){return $.datepicker.formatDate('mm-dd-yy', new Date(cellValue));}, sortable:true },
{ name: 'lastName', index: 'lastName', width: 55, sortable:true },
{ name: 'firstName', index: 'firstName', width: 55, sortable:true },
{ name: 'goCode', index: 'goCode', width: 30, sortable:true },
{ name: 'zoneCode', index: 'zoneCode', width: 30, sortable:true },
{ name: 'sourceName', index: 'sourceName', width: 40, sortable:true, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"'; } },
{ name: 'status', index: 'status', width: 40, sortable:true, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"'; } },
{ name: 'actionAS', index: 'actionAS', width: 30, sortable:true, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"'; } },
{ name: 'vpReportDate', index: 'vpReportDate', width: 50, formatter: function(cellValue){return $.datepicker.formatDate('mm-dd-yy', new Date(cellValue));}, sortable:true },
{ name: 'approvedDate', index: 'approvedDate', width: 50, formatter: function(cellValue){return $.datepicker.formatDate('mm-dd-yy', new Date(cellValue));}, sortable:true },
{ name: 'lastModifiedDate', index: 'lastModifiedDate', width: 50, formatter: function(cellValue){return $.datepicker.formatDate('mm-dd-yy', new Date(cellValue));}, sortable:true },
{ name: 'workflow', index: 'workflow', width: 80, sortable:true, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"'; } }
],loadError: function(xhr,st,err) {
alert(err);
},loadComplete: function (data) {
var $this = $(this),
datatype = $this.getGridParam('datatype');
if (datatype === "xml" || datatype === "json") {
setTimeout(function () {
$this.trigger("reloadGrid");
}, 10);
}
},onSelectRow : function(rowid, status, e) {
var selRow = $(this).getGridParam("selrow");
var selReferralId = $(this).getCell(selRow, 'referralId');
window.location = (contextRoot+"referralDetails?refId=" + selReferralId );
},
pager: '#dartWorkQueuePager',
sortname: 'receivedDate',
sortorder: 'desc',
gridview: true,
viewrecords: true,
loadonce: true,
autowidth: true,
shrinkToFit: true,
height: 'auto',
rowNum: 12,
ignoreCase: true,
altRows:true
});
$("#dartWorkQueueGrid").jqGrid('navGrid','#dartWorkQueuePager',
{
edit:false,
add:false,
del:false,
search:false,
refresh:false
});
$("#dartWorkQueueGrid").jqGrid('filterToolbar',
{
stringResult: true,
searchOnEnter: false,
defaultSearch: "cn"
});
});
Order of the JS includes:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="<c:url value="/css/ui.jqgrid.css"/>" type="text/css" />
<link rel="stylesheet" href="<c:url value="/css/home.css"/>" type="text/css" />
<link rel="stylesheet" href="<c:url value="/css/styles-nyl.css"/>" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.min.js"></script>
<script type="text/javascript" src="<c:url value="/js/shared/grid.locale-en.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/shared/jquery.jqGrid.min.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/shared/json2.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/shared/jquery.loadJSON.js"/>"></script>
Sample Data
{"rows":[{"receivedDate":1357016400000,"referralId":23450,"lastName":"Smith","firstName":"John","goCode":"A99","zoneCode":"NE","sourceName":"Source Name","status":"Pending","actionAS":"AS Action","vpReportDate":1357016400000,"approvedDate":1357016400000,"lastModifiedDate":1357016400000,"workflow":"Recommendation(s) required"},{"receivedDate":1357102800000,"referralId":23451,"lastName":"Smith","firstName":"John","goCode":"A99","zoneCode":"NE","sourceName":"Source Name","status":"Pending","actionAS":"AS Action","vpReportDate":1357102800000,"approvedDate":1357102800000,"lastModifiedDate":1357102800000,"workflow":"Recommendation(s) required"},{"receivedDate":1357189200000,"referralId":23452,"lastName":"Smith","firstName":"John","goCode":"A99","zoneCode":"NE","sourceName":"Source Name","status":"Pending","actionAS":"AS Action","vpReportDate":1357189200000,"approvedDate":1357189200000,"lastModifiedDate":1357189200000,"workflow":"Recommendation(s) required"},
I'm stuck with this problem for days now and heading nowhere. any help is deeply appreciated!
