jquery - postData method not executing function

Question

I have two jqGrids. In the first grid I select a row and the second grid refreshes with data based on the id of the first grid. At least that is how it is supposed to work.

//This is code from the second grid
postData: '{ lobId: ' + BudgetCore.getLobId() + ' }',

//Snippet from BudgetCore...
getLobId: function () {
    var row = jQuery(BudgetCore.GridTables.Lob).jqGrid('getGridParam', 'selrow');
    return row;
}

In Chrome I try to debug the function, getLobid() but it is never executed. The postData request sent: { lobId:null }.

If I change the code above to '{ lobId: ' + 1 + ' }' it works, so there must be something wrong that is causing this function not to execute. In the Chrome JS console executing BudgetCore.getLobId() works fine.

Answer 1

You should use

postData: {
    lobId: function () {
        return $(BudgetCore.GridTables.Lob).jqGrid('getGridParam', 'selrow');
    }
}

See the answer for more details.

UPDATED: If you need to use JSON.stringify additionally inside of serializeGridData then you can't use more the simplest version of serializeGridData:

serializeGridData: function (postData) { return return JSON.stringify(postData); }

Instead of that you should use a little more complex version of serializeGridData which I described in the answer:

serializeGridData: function (postData) {
    var propertyName, propertyValue, dataToSend = {};
    for (propertyName in postData) {
        if (postData.hasOwnProperty(propertyName)) {
            propertyValue = postData[propertyName];
            if ($.isFunction(propertyValue)) {
                dataToSend[propertyName] = propertyValue(); // call the function
            } else {
                dataToSend[propertyName] = propertyValue;
            }
        }
    }
    return JSON.stringify(dataToSend);
}