jQuery button click refresh of jqGrid only firing once

Question

I have the following jQuery code which I'm using to populate a jqGrid. It works perfectly posting to my ASP.NET MVC page on the first click of the button. My
problem is, any other clicks past the first it seems to run through the jquery code when clicking the button but it never makes it to the POST page. Any ideas why?

<script type="text/javascript">

        $(document).ready(function() {
            $('#btnSubmit').click(function() {

                /* Refreshes the grid */
                $("#list").jqGrid({
                    /* The controller action to get the grid data from */
                    url: '/CRA/AddPart',
                    data: { partNumber: "123"},
                    datatype: 'json',
                    mtype: 'GET',
                    /* Define the headers on the grid */
                    colNames: ['col1', 'col2', 'col3', 'col4'],
                    /* Define what fields the row columns come from */
                    colModel: [
                  { name: 'col1', index: 'invid', width: 290 },
                  { name: 'col2', index: 'invdate', width: 290 },
                  { name: 'col3', index: 'amount', width: 290, align: 'right' },
                  { name: 'col4', index: 'tax', width: 290, align: 'right'}],
                    height: 'auto',
                    rowNum: 10,
                    rowList: [10, 20, 30],
                    sortname: 'id',
                    sortorder: "desc",
                    viewrecords: true,
                    imgpath: '../../Scripts/jgrid/themes/steel/images',
                    caption: 'Core Return Authorization Contents:',
                    cellEdit: true
                });
            });
        });

    </script>

Answer 1

The reason the grid isn't reloading is that you are calling the wrong method. The jqGrid method does approximately this:

1. Examine the table to see if it is already a grid; if so, exit.
2. Turn the table into a grid.
3. Populate the first page of data.

So the second time you call the method, it does nothing, as per step 1.

Instead, you should be calling $("#list").trigger("reloadGrid") on the second and all subsequent clicks.

Now, because of your mtype in the grid options, the grid is going to do a GET, not a POST. So if the POST is coming from the button itself (in other words, it is an input of type submit), you should return true to indicate that the submit should continue as usual.

Answer 2

Hi Matt Can you copy your code here. How did you fix the problem. I am also facing the same problem. Thanks

Answer 3

I am also facing the same problem how to fix this. How to identify the 2nd click of the button so that we can call the trigger method. Please reply

Answer 4

Here is the solution :

<script type="text/javascript">
        var firstClick = true;
        $(document).ready(function() {
            $('#btnSubmit').click(function() {
                 if (!firstClick) {
                     $("#list").trigger("reloadGrid");
                 }
                 firstClick = false;
                /* Refreshes the grid */
                $("#list").jqGrid({
                    /* The controller action to get the grid data from */
                    url: '/CRA/AddPart',
                    data: { partNumber: "123"},
                    datatype: 'json',
                    mtype: 'GET',
                    /* Define the headers on the grid */
                    colNames: ['col1', 'col2', 'col3', 'col4'],
                    /* Define what fields the row columns come from */
                    colModel: [
                  { name: 'col1', index: 'invid', width: 290 },
                  { name: 'col2', index: 'invdate', width: 290 },
                  { name: 'col3', index: 'amount', width: 290, align: 'right' },
                  { name: 'col4', index: 'tax', width: 290, align: 'right'}],
                    height: 'auto',
                    rowNum: 10,
                    rowList: [10, 20, 30],
                    sortname: 'id',
                    sortorder: "desc",
                    viewrecords: true,
                    imgpath: '../../Scripts/jgrid/themes/steel/images',
                    caption: 'Core Return Authorization Contents:',
                    cellEdit: true
                });
            });
        });

    </script>