title: jqGrid filter toolbar not working inside jQuery Tabs
body: <p>I'm facing a weird problem here.</p>
  
  <p>I've jqGrids placed inside the jQuery tabs. Below is the snapshots:</p>
  
  <p><img src="https://i.stack.imgur.com/IX3oo.jpg" alt="enter image description here">
  <img src="https://i.stack.imgur.com/u8T7j.jpg" alt="enter image description here"></p>
  
  <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/OtD6m.jpg" alt="enter image description here"></p>
  
  <p>In IE it gives the error:</p>
  
  <blockquote>
    <p>jQuery.jgrid is null or not an object</p>
  </blockquote>
  
  <p>In Chrome the error says:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot call method 'getAccessor' of undefined</p>
  </blockquote>
  
  <p>When I remove the tabs, the filtertoolbar functionality works fine.
  Is there any issue between jqGrid filtertoolbar and jQuery tabs.</p>
  
  <p><strong>Update 1</strong></p>
  
  <p>Tabs JSP code:</p>
  
  <pre><code>&lt;script&gt;    
      $(function() {
          $( "#workQueuesTab" ).tabs();
      });    
  &lt;/script&gt;  
  &lt;/head&gt;
  &lt;body&gt;
        &lt;div style="width:95%" id="workQueuesTab"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="&lt;c:url value="/workQueue/pending"/&gt;"&gt;Pending&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="&lt;c:url value="/workQueue/approved"/&gt;"&gt;Approved&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="&lt;c:url value="/workQueue/additionalSteps"/&gt;"&gt;Additional Steps&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
        &lt;/div&gt;            
  &lt;/body&gt;
  </code></pre>
  
  <p>Grid JSP code:</p>
  
  <pre><code>&lt;table width="100%"&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;span style="font-size: 18px"&gt;&lt;b&gt;${status == 'pending' ? 'Pending': 'Approved'}&lt;/b&gt;&lt;/span&gt;&lt;br/&gt;&lt;br/&gt;
              There are ${workQueueCount} referrals ${status}. Click a row to see details.&lt;a href="&lt;c:url value="/excelExport"/&gt;" id="excelExport" style="float: right;"&gt;Export To Excel&lt;/a&gt;               
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr height="5px"&gt;
          &lt;td&gt;                            
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;table id="dartWorkQueueGrid"&gt;&lt;/table&gt;                              
              &lt;div id="dartWorkQueuePager"&gt;&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Grid Javascript code:</p>
  
  <pre><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"
      });
  });
  </code></pre>
  
  <p>Order of the JS includes:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" /&gt;
  &lt;link rel="stylesheet" href="&lt;c:url value="/css/ui.jqgrid.css"/&gt;" type="text/css" /&gt;
  &lt;link rel="stylesheet" href="&lt;c:url value="/css/home.css"/&gt;" type="text/css" /&gt;
  &lt;link rel="stylesheet" href="&lt;c:url value="/css/styles-nyl.css"/&gt;" type="text/css" /&gt;
  
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="&lt;c:url value="/js/shared/grid.locale-en.js"/&gt;"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="&lt;c:url value="/js/shared/jquery.jqGrid.min.js"/&gt;"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="&lt;c:url value="/js/shared/json2.js"/&gt;"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="&lt;c:url value="/js/shared/jquery.loadJSON.js"/&gt;"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>Sample Data</strong></p>
  
  <pre><code>  {"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"},
  </code></pre>
  
  <p>I'm stuck with this problem for days now and heading nowhere. any help is deeply appreciated!</p>