JQGrid: Results are blank when performing a new search

Question

I currently have a JQGrid implementation. The first time I run the search it populates the grid just fine. When I click the search again, even if I use the same criteria the grid refreshes blank instead of using the returned data. Does anyone have any thoughts as to why this would be?

Here is my searchfunction:

function searchlibrary(searchInfo){
            if(searchInfo == undefined){
                searchInfo = null;
            }
            $("#searchlist").jqGrid({
            url:'./searchlibrary',
            datatype: 'json',
            mtype: 'POST',
            postData: searchInfo,
            colNames:['Resource Name','Unit', 'Topic','Document Type','Content Type','Select'],
            colModel :[ 
              {name:'resourceName', index:'resourceName', width:374, align:'left'}, 
              {name:'unit', index:'unitID', width:40, align:'center',sortable:true,sorttype:'text'}, 
              {name:'topic', index:'topicID', width:220, align:'center',sortable:true}, 
              {name:'docType', index:'docTypeID', width:97, align:'center',sortable:true}, 
              {name:'contentType', index:'contentTypeID', width:97, align:'center',sortable:true},
              {name: 'resourceID', width:55, align: "center", sortable: false, editable: true, edittype: "checkbox", editoptions: {value: "Yes:No"}}
            ],
            rowNum:20,
            sortname: 'resourceName',
            sortorder: 'asc',
            viewrecords: true,
            gridview: true,
            width:878,
            height:251
          });
          $("#searchlist").jqGrid('setLabel','resourceName','',{'text-align':'left','padding-left':'5px'});
        }

There is a dropwdown of items above the grid. When one item is selected either another dropdown with more content shows, or a textbox shows. Then when the user clicks the submit button the contents of the dropdowns/textfield are taken by jquery and an object is built. That object is passed as the searchInfo argument when the searchlibrary function is called. That is then used as the postData in the jqgrid call. I've logged to make sure the object that's being passed is always correct. For some reason anything after the first call to this function returns a blank jqgrid. Also, just for further understand the url called to retrieve the info is a php file that generates json data.

UPDATE

Here's my attempt at Oleg's suggestion. I must be missing something. I'm getting blanks again. Here's the code I'm using now.

$(document).ready(function(){
            $("#searchlist").jqGrid({
                url:'./searchlibrary',
                datatype: 'json',
                mtype: 'POST',
                postData: {data: function(){var myvar = new Object(); myvar = getSearchData(); console.log(myvar); return myvar;}},
                colNames:['Resource Name','Unit', 'Topic','Document Type','Content Type','Select'],
                colModel :[ 
                  {name:'resourceName', index:'resourceName', width:380, align:'left'}, 
                  {name:'unit', index:'unitID', width:40, align:'center',sortable:true,sorttype:'text'}, 
                  {name:'topic', index:'topicID', width:220, align:'center',sortable:true}, 
                  {name:'docType', index:'docTypeID', width:97, align:'center',sortable:true}, 
                  {name:'contentType', index:'contentTypeID', width:97, align:'center',sortable:true},
                  {name: 'select', width:55, align: "center", sortable: false, editable: true, edittype: "checkbox", formatter:"checkbox", editoptions: {value: "Yes:No"},formatoptions: {disabled : false}}
                ],
                rowNum:20,
                sortname: 'resourceName',
                sortorder: 'asc',
                viewrecords: true,
                gridview: true,
                width:878,
                height:251
             });
          $("#searchlist").jqGrid('setLabel','resourceName','',{'text-align':'left'});

          function getSearchData(){
                var searchType = $('select[name="searchtype"]').val();
                var searchCriteria = "";
                var searchInfo = new Object();
                if(searchType=="Unit" || searchType=="Topic" || searchType=="Document Type"){
                    searchCriteria = $('select[name="searchcontent_select"]').val();
                } else if(searchType=="Resource Name" || searchType=="Keyword"){
                    searchCriteria = $('input[name="searchcontent_text"]').val();
                }
                searchInfo = {type:searchType, criteria:searchCriteria}
                return searchInfo;
          }

          $('#searchbutton').click(function(ev){
                $("#searchlist").trigger('reloadGrid');
          });
 });

WORKING SOLUTION

$(document).ready(function(){
            $("#searchlist").jqGrid({
                url:'./searchlibrary',
                datatype: 'json',
                mtype: 'POST',
                postData: {type: function(){return $('select[name="searchtype"]').val();},
                    criteria: function(){return getSearchData();}
                },
                colNames:['Resource Name','Unit', 'Topic','Document Type','Content Type','Select'],
                colModel :[ 
                  {name:'resourceName', index:'resourceName', width:380, align:'left'}, 
                  {name:'unit', index:'unitID', width:40, align:'center',sortable:true,sorttype:'text'}, 
                  {name:'topic', index:'topicID', width:220, align:'center',sortable:true}, 
                  {name:'docType', index:'docTypeID', width:97, align:'center',sortable:true}, 
                  {name:'contentType', index:'contentTypeID', width:97, align:'center',sortable:true},
                  {name: 'select', width:55, align: "center", sortable: false, editable: true, edittype: "checkbox", formatter:"checkbox", editoptions: {value: "Yes:No"},formatoptions: {disabled : false}}
                ],
                rowNum:20,
                sortname: 'resourceName',
                sortorder: 'asc',
                viewrecords: true,
                gridview: true,
                width:878,
                height:251
             });
          $("#searchlist").jqGrid('setLabel','resourceName','',{'text-align':'left'});

          function getSearchData(){
                var searchType = $('select[name="searchtype"]').val();
                var searchCriteria = "";
                var searchInfo;
                if(searchType=="Unit" || searchType=="Topic" || searchType=="Document Type"){
                    searchCriteria = $('select[name="searchcontent_select"]').val();
                } else if(searchType=="Resource Name" || searchType=="Keyword"){
                    searchCriteria = $('input[name="searchcontent_text"]').val();
                }
                searchInfo = {type:searchType, criteria:searchCriteria}
                return searchCriteria;
          }

          $('#searchbutton').click(function(ev){
                $("#searchlist").trigger('reloadGrid');
          });
 });

Answer 1

The usage of $("#searchlist").trigger("reloadGrid") is more effective as the usage of $("#searchlist").jqGrid('GridUnload'). It's understand that $("#searchlist").jqGrid({...]); creates column headers, and many other grid elements. So you should create the grid once with respect of $("#searchlist").jqGrid({...]); and later use only $("#searchlist").trigger("reloadGrid").

I would recommend you to use postData with functions as properties (see here). For example

postData: {
    type: function () {
        return $('select[name="searchtype"]').val(); // get some data
    },
    criteria: function () {
        return getSearchData();}
    }
}

Every time if the user click on '#searchbutton' button or do sorting or paging of data the type and criteria methods will be called. So you can return current values for the proerties and send the data to the server which the user fill in some controls on the page.

Answer 2

It turns out the solution was to unload the grid first. So I added this line:

$("#searchlist").jqGrid('GridUnload');

I put in the the searchlibrary function right above the

$("#searchlist").jqGrid({

That causes the grid to completely unload the get reloaded with the proper content.

As a note I found the idea for the solution here.