jqGrid - aftersavefunc being called before saveRow

Question

I have a jqGrid that allows inline editing/adding of data. When a user double clicks on the row, inline edit starts. When the user presses enter or clicks on another row, I want the changes to be saved. For some reason, however, the row is being restored before the saveRow function is being called and my edits are not saved (the AJAX call never happens).

My code is shown below. When I press the enter key, my changes are saved and sent to the server. When I click on another row, my changes are not sent to the server (no AJAX call) and I see in the console that afterrestorefunc is called before the saveEdit.

var editParams = {
    afterSubmit: processResponse, 
    successfunc: function(response) {
        var processed = processResponse(response);
        if(processed[0] !== true) {
            $.jgrid.info_dialog($.jgrid.errors.errcap, processed[1], $.jgrid.edit.bClose);
        }
        return processed[0];
    }, 
    afterrestorefunc: function(id) {
        console.log('afterrestorefunc - ' + id);
    }, 
    bottominfo: 'Fields marked with an (*) are required', 
    keys: true
}, 
    zipEditParams = $.extend(true, {}, editParams, {url: 'editdata.php'});
/* Set global default options */
$.extend($.jgrid.defaults, {
    grouping: true, 
    shrinkToFit: false, 
    rowList: [10, 20, 30, 40, 50, 100], 
    rowNum: 20, 
    repeatitems: false, 
    ondblClickRow: inlineEdit, 
    onSelectRow: saveEdit
});
$('#zipcodes')
    .jqGrid({
        datatype: 'json', 
        colNames: ['Zip', 'City', 'State', 'Country'], 
        colModel: [
            {name: 'zip_zip', jsonmap: 'zip_zip', width: 75, editable: true, editrules: {required: true}, formoptions: {elmprefix: '(*) '}}, 
            {name: 'zip_city', jsonmap: 'zip_city', width: 75, editable: true, editrules: {required: true}, formoptions: {elmprefix: '(*) '}}, 
            {name: 'zip_state', jsonmap: 'zip_state', width: 75, editable: true, editrules: {required: true}, formoptions: {elmprefix: '(*) '}}, 
            {name: 'zip_country', jsonmap: 'zip_country', width: 75, editable: true, editrules: {required: true}, formoptions: {elmprefix: '(*) '}}
        ], 
        height: 200, 
        ignoreCase: true, 
        jsonReader: { repeatitems: false, id: 'zip_zip' }, 
        pager: '#zipcodes_pager', 
        url: 'data.php', 
        editurl: 'editdata.php'
    })
    .jqGrid('navGrid', '#zipcodes_pager', {add: false, edit: false, del: false, refresh: false, search: false})
    .jqGrid('inlineNav', '#zipcodes_pager', {edit: true, save: true, cancel: false, editParams: zipEditParams});

var lastSel;
/* Start editing the row */
function inlineEdit(id, iRow, iCol) {
    var editParams = this.id == 'zipcodes' ? zipEditParams : (this.id == 'labels' ? labelEditParams : (this.id == 'users' ? userEditParams : {}));
    $(this).jqGrid('editRow', id, editParams);
    focusRow(id, iCol, this);
}

function focusRow(id, iCol, table) {
    var ele = document.getElementById(id + '_' + table.p.colModel[iCol].name), 
        length = ele.value.length;
    ele.focus();
    if(ele.setSelectionRange) { //IE
        ele.setSelectionRange(length, length);
    }
    else if(ele.createTextRange) {
        var range = ele.createTextRange();
        range.collapse(true);
        range.moveEnd('character', length);
        range.moveStart('character', start);
        range.select();
    }
}

function saveEdit(id) {
    if(id && id != lastSel) {
        console.log('saveRow: ' + this.id + ' - ' + lastSel);
        /* Save the last selected row before changing it */
        var saveParams = zipEditParams;
        $(this).jqGrid('saveRow', lastSel, saveParams);
        lastSel = id;
    }
}

function processResponse(response) {
    console.log('processResponse');
    var obj = $.parseJSON(response.responseText), 
        retVal = true, 
        message = '', 
        new_id = '';
    if(obj.message) {
        if(obj.message == 'not logged in') {
            location.href = 'logout.php';
        }
        else if(obj.message != 'true') {
            message = obj.message;
            retVal = false;
        }
    }
    return [retVal, message, new_id];
}

Any help with this problem is greatly appreciated.

UPDATE It seems that if I comment out .jqGrid('inlineNav', '#zipcodes_pager', {edit: true, save: true, cancel: false, editParams: zipEditParams});, then everything works as expected. I also tried just using .jqGrid('inlineNav', '#zipcodes_pager');, but saw the same results. This is nice and could work in the short term, but I still would like the functionality of inline adding if possible.

Answer 1

i think you need to add more functionality to your onSelectRow function

onSelectRow: function (id) {
        if (id && id !== lastsel) {
        // cancel editing of the previous selected row if it was in editing state.
        // jqGrid hold intern savedRow array inside of jqGrid object,
        // so it is safe to call restoreRow method with any id parameter
        // if jqGrid not in editing state
        if (typeof lastsel !== "undefined") {
        jQuery("#grid").jqGrid('restoreRow', lastsel);
        }
    lastSel = id;
    }
    }, 

in this code i'm not doing editing on selecting the row, but you can see that you need to restore the previous selected row, if that row was in edit mode and you click on some other row.

Try this.