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>

Solution 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.

Solution 2

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>

Solution 3

Because I need to POST new values to the the Action for me it does not work "reloadGrid".

I just remove all the content and create the empty table again.

In the if I check if the grid is there to hide the "empty chart" div (it shows just a message). In the else I just clean the div that surrounds the table and then I add inside the table again. When the plugin finds the empty table then it loads the grid completely again.

LoadTableData is the function that has the common functionality to create and load the grid.

Probably this solution is not elegant, but when the time is rushing...

$("#btnDownloadsPerFile").click(function () {
            if ($('#chartContainerDownloadsPerFile .ui-jqgrid').length == 0) {
                $('#chartContainerDownloadsPerFile .emptyChart').hide();
            }
            else {
                $('#chartContainerDownloadsPerFile').empty();
                $('#chartContainerDownloadsPerFile').append('<table id="downloadsPerFileGrid"></table>');
            }
            LoadTableData("downloadsPerFileGrid", $('#ddlportalOptionsDownloadsPerFile').val(), "downloadsPerFile", $('#ddlTimeOptionsDownloadsPerFile').val(), $('#ddlTimeValuesDownloadsPerFile').val(), $('#ddlCountries').val());
        });