Javascript variable into postdata of jqGrid

Question

Right now I have this postData: { search: function() { return $("#search").val(); },}, postData: { search: function() { return $("#search").val(); },},

I then have jQuery function above the jqGrid function that performs some logic and produces a string variable. Right now I am just taking that variable and setting the value of the search element like this:

$("#startSearch").click(function() {

  $("#search").val(searchVal);

   $("#grid").trigger("reloadGrid");

});

This works but I was hopping to do this differently. I want to just pass the seachVal variable that my jQuery function produces right into the postdata.

I tried it like this but its not working postData: { search: function() { return searchVal; },}, { search: function() { return searchVal; },},

I'm getting an error that says searchVal is not defined. I made sure that the searchVal variable is global but it is still not working.

Is this possible or am I just looking at this wrong?

Any help would be great.

Thanks

UPDATE:

Here is a stripped down version of the page:

<fieldset>
<input type='text' id='search' />
<button type='button' id='startSearch'>Search</button>
</fieldset>


<script type="text/javascript">

    $(function(){

            $("#startSearch").click(function() {

                serchVal = 'transID > "5"';

                $("#search").val(serchVal);

                $("#grid").trigger("reloadGrid");


            });


      $("#list").jqGrid({

        url:'data.cfc?method=gridData',
        datatype: 'json',
        mtype: 'POST',

        jsonReader : {
         root: "rows",
         page: "currentpage",
         total: "totalpages",
         records: "totalrecords",
         repeatitems: false,
         id: "0",
       },

      postData: { search: function() { return $("#search").val(); },},      

        colModel :[ 
          {name:'transid', label:'Trans ID', width:60}, 
          {name:'companyname', label:'Company Name', width:245},
          {name:'companycode', label:'Company Code', width:245},
          {name:'datasource', label:'Datasource', width:245}

        ],
        pager: '#pager',
        rowList:[10,50,100],
        rowNum:'10',
        height:221,
        sortname: 'transid',
        sortorder: 'asc',
        viewrecords: true,
        gridview: true,
        caption: 'Get Trans',
        altRows: false,
        autowidth: true,
        forceFit: true,
        rownumbers: true,
        scroll: false,
        sortable: true

      });       

      $("#list").jqGrid('navGrid','#pager',{edit:false,add:false,del:false,search:false,view:true}); 

    }); 

</script>

    <table id="grid"></table>
    <div id="pager"></div>

Answer 1

I suppose the problem exist just because you didn't declared the variable serchVal (you means probably searchVal ). You can try to modify the code to the following

$(function () {
    var searchVal = '';

    $("#startSearch").click(function () {
        searchVal = 'transID > "5"';
        $("#grid").trigger("reloadGrid");
    });

    $("#list").jqGrid({
        url: 'data.cfc?method=gridData',
        datatype: 'json',
        mtype: 'POST',
        jsonReader : {
            page: "currentpage",
            total: "totalpages",
            records: "totalrecords",
            repeatitems: false,
            id: "0"
        },
        postData: { search: function () { return searchVal; }},
        colModel: [
            {name: 'transid', label: 'Trans ID', width: 60},
            {name: 'companyname', label: 'Company Name', width: 245},
            {name: 'companycode', label: 'Company Code', width: 245},
            {name: 'datasource', label: 'Datasource', width: 245}
        ],
        pager: '#pager',
        rowList: [10, 50, 100],
        rowNum: 10,
        height: 221,
        sortname: 'transid',
        viewrecords: true,
        gridview: true,
        caption: 'Get Trans',
        autowidth: true,
        rownumbers: true,
        sortable: true
    }).jqGrid('navGrid', '#pager',
        {edit: false, add: false, del: false, search: false, view: true});
});

After that you can remove <input type='text' id='search' /> .

Answer 2

Why don't you just wrap your logic in a function

function SomeLogic() { 
   return("some logic here!");
}

which is going to be called like this:

postData: { search: function() { return SomeLogic() } },

so you just have to reload the grid

$("#startSearch").click(function() {
   $("#grid").trigger("reloadGrid");
});

obviously your function SomeLogic can just return searchVal

function SomeLogic() { 
   return(searchVal);
}