THE PLAN
I have a page with a jqGrid on it - this grid should be able to load one of three json payloads that are of the same type - just different filters. The data that loads is based on the button one clicks (In Planning, Approved, Completed).
THE PROBLEM
The problem I am having is when I reference $("#jobGrid").jqGrid('GridUnload'); I get an "uncaught exception: jqGrid - No such method: GridUnload".
THE CODE
The following libraries are loaded - basically I grabbed them all trying to get $("#jobGrid").jqGrid('GridUnload'); to fire
<!-- jqGrid Resources--> <script type="text/ecmascript" src="http://cdn.cov.com/jqGrid_JS_5.0.0/js/i18n/grid.locale-en.js"></script> <script type="text/ecmascript" src="http://cdn.cov.com/jqGrid_JS_5.0.0/js/jquery.jqGrid.min.js"></script> <script type="text/javascript" src="http://cdn.cov.com/jqGrid_JS_5.0.0/src/grid.base.js"></script> <script type="text/javascript" src="http://cdn.cov.com/jqGrid_JS_5.0.0/src/grid.common.js"></script> <script type="text/javascript" src="http://cdn.cov.com/jqGrid_JS_5.0.0/src/grid.formedit.js"></script> <script type="text/javascript" src="http://cdn.cov.com/jqGrid_JS_5.0.0/src/jquery.fmatter.js"></script> <script type="text/javascript" src="http://cdn.cov.com/jqGrid_JS_5.0.0/src/grid.jqueryui.js"></script> <script type="text/javascript" src="http://cdn.cov.com/jqGrid_JS_5.0.0/plugins/grid.addons.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="http://cdn.cov.com/jqGrid_JS_5.0.0/css/ui.jqgrid-bootstrap.css" />
JavaScript function where exception occurs. Note: When this method is fired, data already exists in the grid
// Approved Filter var approvedFilter = function () { // Ready Up Defaults $.jgrid.defaults.width = $("#jobGridContainer").width(); $.jgrid.defaults.responsive = true; // Reset Data (Grid has data in it already $("#jobGrid").jqGrid('GridUnload'); $("#jobGrid").jqGrid({ url: RestService.GetApprovedJobsService(), mtype: "GET", styleUI: 'Bootstrap', datatype: "json", colModel: [ { label: 'JobNumber', name: 'JobNumber', key: true, width: 75 }, { label: 'Job Name', name: 'JobName', width: 150 }, { label: 'Request State', name: 'JobState', width: 150 }, { label: 'Status', name: 'JobStatus', width: 150 }, { label: 'Request By', name: 'JobRequestor', width: 150 }, { label: 'Last Modified', name: 'LastModifiedDate' } ], viewrecords: true, height: 375, rowNum: 10, loadonce: true, pager: "#jqGridPager", caption: "Showing Approved Requests. Click row to view details", onSelectRow: function (rowid, selected) { if (rowid != null) { document.location.href = getAppRootUrl() + "/Service/Job/" + rowid; } } }); }
Any suggestions or help would be greatly appreciated