jqgrid inline edit get ajax success response

Question

Can any one help me to get ajax response after inline editing in the jqgrid? Below is my code in the jqgrid and I don't know how to get ajax success response after inline editing.

I have tried with "loadComplete", "gridComplete" and "afterComplete". These are working only after the grid loaded but not after editing the cells.

jQuery('#grid').jqGrid({
            "width": "640",         
            "hoverrows": true,
            "viewrecords": false,
            "gridview": true,
            "url": "es.php",
            "editurl": "es.php",
            "cellurl": "es.php",
            "rowNum": 10,
            "rowList": [10, 20, 30],
            "sortname": "id",
            "datatype": "json",
            "colModel": [{
                "name": "employee",
                "sortable": false,
                "index": "employee",
                "editable": true,
                "editrules": { required: true } 
            }, {
                "name": "age",
                "index": "age",
                "sortable": false,
                "editable": true,
                "editrules": { required: true } 
            }, {
                "name": "actions",
                "formatter": "actions",
                "editable": false,
                "sortable": false,
                "resizable": false,
                "delbutton" : false, 
                "fixed": true,
                "width": 60,
                "formatoptions": {
                    "keys": true,
                    "delbutton" : false, 
                    "delOptions": {}, 
                }
            }, {
                name: 'id',
                index: 'id',
                "key": true,
                hidden: true,
                viewable: true,
                editrules: {
                    edithidden: true
                },
                    "editable": false
                }
            ],
            "postData": {
                "oper": "fsgrid"
            },
            "prmNames": {
                "page": "page",
                "rows": "rows",
                "sort": "sidx",
                "order": "sord",
                "search": "_search",
                "nd": "nd",
                "id": "id",             
                "searchField": "searchField",
                "searchOper": "searchOper",
                "searchString": "searchString",
                "oper": "oper",
                "query": "grid",
                "addoper": "wsadd",
                "editoper": "wsedit",
                "excel": "excel",
                "subgrid": "subgrid",
                "totalrows": "totalrows",
            },
            "loadError": function(xhr, status, err) {
                try {
                    jQuery.jgrid.info_dialog(jQuery.jgrid.errors.errcap, '<div class="ui-state-error">' + xhr.responseText + '</div>', jQuery.jgrid.edit.bClose, {
                        buttonalign: 'right'
                    });
                } catch (e) {
                    alert(xhr.responseText);
                }
            },
            "pager": "#pager",
            beforeShowForm: function(form) {
              $(".ui-inline-del").remove();
            },
        }); 

         jQuery('#grid').jqGrid('navGrid', '#pager', {
                "edit": false,
                "add": true,
                "del": false,
                "search": false,
                "refresh": false,
                "view": false,
                "excel": false,
                "pdf": false,
                "csv": false,
                "columns": false
            });     

With the above, everything is working fine. But I don't how to get ajax response after inline editing is done. More than that, I am very new to the jqgrid. I think, I am using very basic jqgrid code. So Please suggest me to get the response.

Answer 1

There are many ways how inline editing can be used. You use formatter: "actions" which uses inline editing internally. So you can specify the options of the inline editing inside of formatoptions. For example to process success response after inline editing you can specify onSuccess callback which have the same parameters like successfunc of editRow. The callback onError can be used in the same way as errorfunc of editRow. The old answer provides you example of the usage of the callbacks.

One more way to specify successfunc or errorfunc callbacks of inline editing is the usage of $.jgrid.inlineEdit.

One more way is the usage of jqGridInlineSuccessSaveRow and jqGridInlineErrorSaveRow jQuery events:

jQuery("#grid").bind("jqGridInlineSuccessSaveRow",
    function (e, jqXHR, rowid, options) {
        alert("successful server response:\"" + jqXHR.responseText + "\"");
        // in case of adding new row on the server you can return id
        // of the new row
        return [true, jqXHR.responseText];
    }
);

(I don't tested the code, but I hope I made no errors here).

Some small remarks to the code which you posted: You can remove beforeShowForm callback from the list of options jqGrid. The callback can be used in case of form editing and it should be used on another place.

One more remark: you can remove unneeded hidden id column if you fill jqGrid correctly. It's important to understand that jqGrid assign id attribute to every row of the grid (to <tr> elements). The value of the id attribute is the rowid. The existence of hidden id column can make only more problems especially if you allow to edit the data.