编辑并保存任何行后重新加载JqGrid表

Question

I have 4 jqGrid tables in a php file and passsing different json array for the each grid tables.The data which i am displaying on grid are from 1 table with different sql conditions.

I am using inline editing functionality for all the grids and when i edit and save the row from table1, i want all the grids should get refresh so that if the row which was previously edited is exists in next tables that should get vanished automatically. I want to reload the all the grid tables after editing any row in any table. I have written the following code:

<table id="jqgrid"></table>
<div id="pjqgrid"></div>

<table id="jqgrid1"></table>
<div id="pjqgrid1"></div>

<table id="jqgrid2"></table>
<div id="pjqgrid2"></div>

<table id="jqgrid3"></table>
<div id="pjqgrid3"></div>

<script>
pageSetUp();
var myEditOptions = {
    keys: true,
    successfunc: function (response) {
       // alert(JSON.stringify(response)); 
        var msg=response.responseText;
        var n =msg.search("Updated");
        //alert(n);
        if(n>=0)
        {
            $(".inner").html("<div class='alert alert-success fade in'>     <button class='close' data-dismiss='alert'>X</button><i class='fa-fw fa fa-thumbs-up'></i>  "+msg+" </div>");
        } 
        else
        {
            $(".inner").html("<div class='alert alert-danger fade in'><button class='close' data-dismiss='alert'>X</button><i class='fa-fw fa fa-thumbs-down'></i>  "+msg+" </div>");      
        }
        $("#jqgrid").trigger('reloadGrid');
        $("#jqgrid1").trigger('reloadGrid');
        $("#jqgrid2").trigger('reloadGrid');
        $("#jqgrid3").trigger('reloadGrid');
        jQuery("#jqgrid").jqGrid('resetSelection');
        jQuery("#jqgrid1").jqGrid('resetSelection');
        jQuery("#jqgrid2").jqGrid('resetSelection');
        jQuery("#jqgrid3").jqGrid('resetSelection');
        return true;     
    },
    errorfunc: function (rowid,response) {
        //alert(rowid);
    },
    afterrestorefunc:function (rowid,response) {
        jQuery("#jqgrid").jqGrid('resetSelection');
    }

};
</script>

Answer 1

It would you recommend to use aftersavefunc instead of successfunc for reloading of the grids. Moreover you should place .trigger("reloadGrid") inside of setTimeout. It will allows to finish processing of editing before starting reloading:

var myEditOptions = {
    keys: true,
    aftersavefunc: function () {
        setTimeout(function () {
            $("#jqgrid,#jqgrid1,#jqgrid2,#jqgrid3").trigger("reloadGrid");
        }, 50);
    },
    ...
};