Jquery grid loading only on 1st click and not reloading on subsequent clicks

Question

I have a JQuery grid which is being populated on a button click based on certain drop-down selections.

The grid is loaded with data on the first button click. But on subsequent clicks the grid doesn't reload based on the changed drop-down selections.

The grid data loaded on the first button click persists until and unless i reload the page.

I have gone through some solutions online,such as

1. using $("#tblJQGrid").trigger("reloadGrid");for subsequent clicks except for the first click
2. cache:false property.

But none of them worked.

Here is my jqgrid code for reference

function BindGridData()
{
    $("#tblJQGrid").jqGrid(
            {url: "@Url.Action("GetGeographyBreakUpData", "GeoMap")"+ "?Parameters=" + Params + "",
                datatype: "json",
                //data: { "Parameters": Params },
                async: false,
                mtype: 'GET',
                cache: false,
                colNames: ['Id','GeoGraphy', 'Completed', 'InProgress'],
                colModel: [
                { name: 'Id', index: 'Id', width: 20, stype: 'text',hidden:true },
                { name: 'Geography', index: 'Geography', width: 150 },
                { name: 'Completed', index: 'Completed', width: 150 },
                { name: 'InProgress', index: 'InProgress', width: 150 },
                ],
                pager:'#pager',
                jsonReader: {cell:""},
                rowNum: 10,
                sortorder: "desc",
                sortname: 'Id',
                viewrecords: true,

                caption: "Survey Status:Summary",
                scrollOffset: 0});

 }

And here is how i am initialising the button click event

$(document).ready(function () {
var firstClick=true;
        $("#btnSubmit").click(function(){
            btnSubmitClick();
            debugger
            if(!firstClick)
            {
                $("#tblJQGrid").trigger("reloadGrid");
            }
            firstClick=false;
            BindGridData();
        });
});

Can someone tell me what i am doing wrong?

Answer 1

It seems that there are typical misunderstanding what the code $("#tblJQGrid").jqGrid({...}); do. It's create the grid. It means that in converts the empty table <table id="btnSubmit"></table> in relatively complex structure of divs and tables. See here. After understanding of that it should be clear that the second calling of BindGridData has no sence, becsue table#btnSubmit is not more empty. jqGrid tests it and just do nothing. Thus your current code just trigger reloadGrid with the old URL (see Params).

To fix the problem you have two main options:

1. usage url: "@Url.Action("GetGeographyBreakUpData", "GeoMap")" and postData with properties defined as functions (see the old answer)
2. recreate the grid on click instead of triggering reloadGrid. You can call GridUnload method (see the old answer) before call of BindGridData.