jquery - Can't refresh jqgrid with loadonce: true

Question

I obviously need to refresh the grid from the server after I create/edit/delete a row. I have checked all of Oleg's aswers regarding the reload and I still can't make it work. What am I doing wrong? Why does a such simple matter have to be so complicated.

I would also like to close the forms after posting.. but that's the next step

Here is my code:

$(function(){ 
         var roles = null;
                $.ajax({
                    'async': false,
                    'global': false,
                    'url': '<?php echo base_url().'utils/Admin_Rest/get_roles'?>',
                    'dataType': 'json',
                    'success': function (data) {
                        roles = data;
                    }
                });
var comptes=$("#Comptes");
comptes.jqGrid({
            url:'<?php echo base_url().'utils/Admin_rest/get_comptes'?>',    
            mtype : "post",           
            datatype: "json",           
            colNames:['Nom','Prenom','Email','Utilisateur','Telephone', 'Password','Role'],   
            colModel:[  
                {name:'first_name',index:'first_name',editable:true, editrules: { required: true }, edittype:'text',search:false, align:"center"},
                {name:'last_name',index:'last_name',editable:true, edittype:'text', editrules: { required: true }, search:false,  align:"center"},
                {name:'email',index:'email',editable:true, editrules: { required: true }, edittype:'text',search:false, align:"center"},
                {name:'username',index:'username',editable:true, editrules: { required: true }, edittype:'text',search:false, align:"center"},
                {name:'phone',index:'phone',editable:true, editrules: { required: true }, edittype:'text',search:false, align:"center"},
                 {name:'password',index:'password',editable:true, hidden:true, editrules: { edithidden:true }, edittype:'password',search:false, align:"center"},                       
                {name:'role',index:'role', editable:true, editrules: {required: true},  edittype:'select', search:true, stype:'select', 
                    searchoptions:{ value:roles},
                    editoptions:{ value:roles}}
                ],

            rowNum:10,
            jsonReader: {
                 root: "rows", 
                  page: "page", 
                  total: "total", 
                  records: "records", 
                  repeatitems: false, 
                  id: "id",
                  userdata: "userdata"
            },                  
            width: 850,
            height: "100%",
            rowList:[10,20,30],
            pager: '#pager',
            sortname: 'id',
            viewrecords: true,
            loadonce:true,
            rownumbers: true,
            gridview: true,
            pagination:true,
            editurl: "<?php echo base_url().'utils/Admin_rest/edit_compte'?>",  

            caption:""
            }).navGrid('#pager',
                    {edit:true,
                    add: true, 
                    del:true,refresh:false},
              { // edit options
                    beforeShowForm: function(frm) { 
                        comptes.jqGrid('setColProp', 'password', {editrules: {required: false}});
                    }
                }, 
                { // add options
                    beforeShowForm: function(frm) { 
                        comptes.jqGrid('setColProp', 'password', {editrules: {required: true}});
                }
                });

comptes.jqGrid('navGrid', '#pager', {refresh: false},
        { // Edit options
            afterSubmit: function () {
                $(this).jqGrid('setGridParam', {datatype:'json'});
                return [true,'']; // no error
            }
        },
        { // Add options
            afterSubmit: function () {
                $(this).jqGrid('setGridParam', {datatype:'json'});
                return [true,'',false]; // no error and no new rowid
            }
        },
        { // Delete options
            afterSubmit: function () {
                $(this).jqGrid('setGridParam', {datatype:'json'});
                return [true,'']; // no error
            }
        }
    );
});

Answer 1

It seems that the parameters were given wrong. The correct pager params would be:

.navGrid('#pager',
                    {edit:true,
                    add: true, 
                    del:true,refresh:false},
              { // edit options
                    beforeShowForm: function(frm) { 
                        comptes.jqGrid('setColProp', 'password', {editrules: {required: false}});
                    },
                    afterSubmit: function() {
                        comptes.jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
                          return [true,'',false]; // no error and no new rowid
                         }
                }, 
                { // add options
                    beforeShowForm: function(frm) { 
                        comptes.jqGrid('setColProp', 'password', {editrules: {required: true}});
                    },
                     afterSubmit: function() {
                            comptes.jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
                        return [true,'']; // no error
                    }
                } ,
                { // delete options
                     afterSubmit: function() {
                            comptes.jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
                        return [true,'']; // no error
                    }
                }       
               );