Grid passing old parameter value to server - ajax

Question

I am trying to learn jqGrid. Using the following code, I could load data upon search button click. I searched many blogs and forum posts and found that datatype can be made as local to avoid initial load. All those are working fine. But the parameter value passed to the server on the second search attempt is the same old value of the first search attempt. What is the missing part in my code below?

Following is the script

<script type="text/javascript">

        $(document).ready(function () {



            $('#txtLmiquidAmountFrom').val("800");
            $('#txtLmiquidAmountTo').val("1200");


            $("#grid").jqGrid({
                url: "GamesList.aspx/GetMyGames",
                mtype: 'POST',
                postData:
                {
                    gameSearch: $('#txtGameName').val() ,
                    ownerSearch:  $('#txtOwner').val() ,
                    createdDateFrom:  $('#txtCreatedFrom').val() ,
                    createdDateTo:  $('#txtCreatedTo').val() ,
                    liquidAmountFrom:  $('#txtLmiquidAmountFrom').val() ,
                    liquidAmountTo:  $('#txtLmiquidAmountTo').val() 
                },
                datatype: "local", //json if want to load initially
                ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
                serializeGridData: function (postData) {
                    return JSON.stringify(postData);
                },
                jsonReader: {
                    repeatitems: false,
                    root: function (obj) { return obj.d; }
                },
                colNames: ['GameID', 'GameName', 'GameOwner', 'PlannedCloseDate', 'CreatedOnDate', 'GameLiquidAmount'],
                colModel: [
                    { name: 'GameID', index: 'GameID' },
                    { name: 'GameName', index: 'GameName' },
                    { name: 'GameOwner', index: 'GameOwner' },
                    { name: 'PlannedCloseDate', index: 'PlannedCloseDate', formatter: 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' } },
                    { name: 'CreatedOnDate', index: 'CreatedOnDate', formatter: 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' } },
                    { name: 'GameLiquidAmount', index: 'GameLiquidAmount' }
                ],
                rowNum: 10,
                /*rowList: [10, 20, 30],*/
                pager: '#pager2',
                sortname: 'id',
                viewrecords: true,
                sortorder: "desc",
                caption: "Games",
                gridview: true,
                height: "auto",
                loadonce: true,
                recordtext: "Records {0} - {1} of {2}",
                emptyrecords: "No records to view",
                loadtext: "Loading...",
                pgtext: "Page {0} of {1}"
            });

            $("#btnSearch").click(function (e)
            {
                $("#grid").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
                e.preventDefault();
            });



        });


    </script>

HTML Markup

  <div id="multiAccordion">

        <h3><a style="font-size: 13px;">Search</a></h3>
        <div>
            <table class="app-search-table">
                <tr>
                    <td class="app-search-description-td">Created From 
                    </td>
                    <td>
                        <input id="txtCreatedFrom" type="text" />
                    </td>
                    <td class="app-search-description-td">Liquid Amount From 
                    </td>
                    <td>
                        <input id="txtLmiquidAmountFrom" type="text" />
                    </td>

                    <td class="app-search-description-td">Owner
                    </td>
                    <td>
                        <input id="txtOwner" type="text" />
                    </td>

                </tr>
                <tr>
                    <td class="app-search-description-td">Created To
                    </td>
                    <td>
                        <input id="txtCreatedTo" type="text" />
                    </td>
                    <td class="app-search-description-td">Liquid Amount To
                    </td>
                    <td>
                        <input id="txtLmiquidAmountTo" type="text" />
                    </td>

                    <td class="app-search-description-td">Game Name
                    </td>
                    <td>
                        <input id="txtGameName" type="text" />
                    </td>
                </tr>
                <tr>
                    <td colspan="6" style="text-align: right;">
                        <button id="btnSearch" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
                            <span class="ui-button-text">Search</span>
                        </button>
                    </td>

                </tr>

            </table>

        </div>

        <br />

        <h3><a style="font-size: 13px;">Search Result</a></h3>
        <div>
            <table id="grid"></table>
            <div id="pager2"></div>

        </div>
    </div>

UPDATE

Following two resolved it

Making it dynamic by uisng function, as mentioned in the answer by @Oleg.
Complex version of serializeGridData as commented by @Oleg postData method not executing function

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

1

To solve the problem you should use functions for every dynamical property of postData:

postData: {
    gameSearch: function () { return $('#txtGameName').val(); },
    ownerSearch: function () { return $('#txtOwner').val(); },
    createdDateFrom: function () { return $('#txtCreatedFrom').val(); },
    createdDateTo: function () { return  $('#txtCreatedTo').val(); },
    liquidAmountFrom: function () { return $('#txtLmiquidAmountFrom').val(); },
    liquidAmountTo: function () { return $('#txtLmiquidAmountTo').val(); }
}

The problem in your old code: the statement $("#grid").jqGrid({...}); will be executed once. It calls $("#grid").jqGrid(); with object as parameter. The object will be initialized at the moment of execution of the statement and the current values will be saved as properties of postData(the current value $('#txtGameName').val() will be saved as gameSearch property of postData of the parameter object). I described the trick with functions in detailed in the old answer.

edited May 23 '17 at 11:43

Community

1
1

answered Jul 27 '15 at 07:45

Oleg

220,925
34
403
798

I am getting an error `Invalid web service call, missing value for parameter: 'gameSearch'.` Updated the question with details – LCJ Jul 27 '15 at 16:02
1

@Lijo: I see that you use `serializeGridData` additionally. It's the origin of your problem in the current implementation. You should modify it and calls all methods *before* using `JSON.stringify`. See [the answer](http://stackoverflow.com/a/13162471/315935) (or [this one](http://stackoverflow.com/a/5811359/315935)) for example for the corresponding code example. – Oleg Jul 27 '15 at 16:36
Thanks..That did the trick.. Do you think you can add some explanation about what is happening inside the new version of `serializeGridData` ? – LCJ Jul 27 '15 at 17:39
1

@Lijo: In general such code have sense only if one hold `serializeGridData` *separately* from the main grid (one override defaults fr the project for example). If one have only one grid and one JavaScript file with jqGrid then one can remove `postData` at all and makes the calls inside of `serializeGridData`. One can use `jQuery.extend`. – Oleg Jul 27 '15 at 18:27

Grid passing old parameter value to server - ajax

1 Answers1

Linked