JQGrid data doesn't reload on second or subsequent click events...(it loads on first getdata button click)

Question

I am Using JQGrid to display some list of data from db depending on LogID selected from drop down list. ITS displaying contents Correctly on first click. But on all subsequent click nothing happens the page doesn't change or reload or do any thing, but if I try to debug the script I can see that the button click event is fired every time its clicked but still it doesn't bring back the changed LogID data from the db. I am not sure but I think its something related to the reloadGrid trigger ...

  <script type="text/javascript">
    var firstClick = true;
    $(document).ready(function () {
        $('.editor-date > input').datepicker();
        $('.getdata').click(function () {
            if (!firstClick) {
                $("#GridTable").trigger("reloadGrid");
            }
                firstClick = false;
                $('#GridTable').jqGrid({
                    url: '<%= Url.Action("GetData", "Report") %>',
                    datatype: 'json',
                    mtype: 'POST',
                    colNames: ['Log ID'],
                    colModel: [{ name: 'LogID', index: 'MessageLogID', key: true, formatter: pointercursor }],
                    multiselect: true,
                    sortname: 'LogID',
                    sortorder: "asc",
                    viewrecords: true,
                    pager: $('#pager'),
                    rowNum: 20,
                    rowList: [5, 10, 20, 50],
                    postData: {
                        IdParam: $('#testLogID').val()
                    },
                    jsonReader: {
                        repeatitems: false,
                        id: 'LogID',
                        records: 'TotalRecords',
                        total: 'TotalPages',
                        page: 'CurrentPage',
                        root: 'Rows'
                    },
                    loadError: function (xhr, status, error) {
                        messageBox('Error', 'Error occurred loading data.');
                    },
                    height: 'auto',
                    width: 'auto'
                });

            });

I found a similar issue but the solution is not workingjQuery button click refresh of jqGrid only firing once

Answer 1

I think that you should change

postData: {
    IdParam: $('#testLogID').val()
}

to

postData: {
    IdParam: function () {
        return $('#testLogID').val();
    }
}

(see my old answer for more information).

You current code save the value of $('#testLogID').val() at the moment of the grid was created at the first call. Later calls uses the same old value. The usage of function/method inside of postData follows calling the function every time during reloading of the grid. It will be done indirectly: jqGrid use $.ajax which uses $.param which calls the function postData.IdParam.

Additionally I would recommend you to add gridview: true option and change pager: $('#pager') to pager: "#pager" and move the line var firstClick = true; inside of function $(document).ready(function () {...});. I miss additionally } else { part of if (!firstClick) {. It's important to understand that one should create grid once with $('#GridTable').jqGrid({...}); and use only $("#GridTable").trigger("reloadGrid"); later.