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');
          });
 });

Have you tried using to reload the jqGrid with ."trigger("reloadGrid")"; — Suave Nti, Jun 27 '12 at 18:00
I just tried adding .trigger("reloadGrid") to the end of the call. It showed the loading box, but the content didn't change. I did find a solution though. I'll post it below. — LoneWolfPR, Jun 27 '12 at 18:06

score 1 · Answer 1 · edited May 23 '17 at 11:48

1

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.

edited May 23 '17 at 11:48

Community

1
1

answered Jun 27 '12 at 18:09

LoneWolfPR

3,978
12
48
84

The usage of `$("#searchlist").trigger("reloadGrid")` is more effective as the usage of `$("#searchlist").jqGrid('GridUnload')`. You should just set new `postData` before or use functions inside of `postData` properties (see [here](http://stackoverflow.com/a/2928819/315935)). You should 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")`. – Oleg Jun 27 '12 at 18:40
I've tried what you're talking about, and I'm having the problem with blank results again. It's logging the proper data to the console, but I get a blank. Am I not triggereing the reload properly? – LoneWolfPR Jun 27 '12 at 19:15
You should post the full server response after the searching. Moreover you should fix some errors in your code. First you should define all variables before you use there. Currently at least `searchInfo` and `myvar` are used without be defined before. You should add `;` at the end of `})` which close `$(document).ready(function(){` and then move `function getSearchData` and `$('#searchbutton').click(...);` inside of `$(document).ready(function(){...});`. In any way you should use fiddler or firebug to see exact HTTP request and response. – Oleg Jun 27 '12 at 19:29
Ok. I made the fixes. It's coming back blank still. I've tracked it down to that somehow the postdata is getting lost. It traces the right data to the log, but php returns an error because the mysql call I make doesn't have the right info. I have these two lines in my php: $searchType = $_POST['data']['type']; $searchCriteria = $_POST['data']['criteria']; Somehow this info is not being processed properly. – LoneWolfPR Jun 27 '12 at 19:46
Could you append your question with the exact data send to the server on searching and with the data returned from the server? Please use Fiddler, Firebug etc to get the exact HTTP data. By the way `var searchInfo = {};` do exactly the same as `var searchInfo = new Object();`. In your case you can just use `var searchInfo;`. It is not your problem, but the construction `new Object()` should be never used. The same with `var myvar = new Object(); myvar = getSearchData();` which can be replaced to `var myvar = getSearchData();`. – Oleg Jun 27 '12 at 19:54
I got it to work. Apparently it didn't like me setting postdata equal to a single variable 'data' which was set to a function that returned an object. I broke it apart as shown above, and it works. Notice that instead of data now being equal to an object returned containing type and criteria, I made postdata contain both of those separately. – LoneWolfPR Jun 27 '12 at 20:04
OK, debugging and tracing could be really helpful. – Oleg Jun 27 '12 at 20:06
If you post a summary of what you helped me through I'll credit it as the answer. Thanks for your help. Edit: Yeah, you're right about debugging. I use chromes equivalent to firebug. It helped me see the issues with the post data. – LoneWolfPR Jun 27 '12 at 20:08
I think you should remove `$("#searchlist").setGridParam({'postData':{data: function(){...}}` and use just `postData: {type: function() {...}, criteria: function(){...}}` which always return the correct values of `type` and `criteria`. – Oleg Jun 27 '12 at 20:11

score 0 · Accepted Answer · edited May 23 '17 at 12:04

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.

JQGrid: Results are blank when performing a new search

UPDATE

WORKING SOLUTION

2 Answers2