JqGrid don'i reload after click on the button

Question

I work with jqGrid on my project and I have a problem that can not seem to solve even after reading the forums on the same subject.

I would reload the grid when a user clicks a button after selecting a date. I want the data recharge correspodent to choose the date.

I use the following code:

var loadfacture  = false;

    $('#btn-facture').click(function(){     

        if(!loadfacture){           

            $("#factures").jqGrid({
                url:'loadfactureencours.json',
                datatype: "json",           
                autowidth: true,
                height:250,
                colNames:['#','Numero','Date', 'Client','Serveur','Prix Total','Avance','Regler','Notes'],
                colModel:[
                    {name:'idfac',index:'idfac', width:45,align:"center"},
                    {name:'numfac',index:'numfac', width:80,align:"center"},
                    {name:'datefac',index:'datefac', width:150,align:"center"},
                    {name:'client',index:'client', width:145,align:"center"},
                    {name:'utilisateur',index:'utilisateur', width:125,align:"center"},                     
                    {name:'montant',index:'montant', width:70,align:"center"},
                    {name:'avance',index:'avance', width:60,align:"center"},
                    {name:'regler',index:'regler', width:50,align:"center"},
                    {name:'description',index:'description', width:150, sortable:false}
                ],
                rowNum:10,
                rowTotal: 2000,
                rowList : [10,20,30,40,50,60],
                loadonce:true,
                mtype: "GET",
                postData: {
                    day: function () {                      
                        return $('#daySelect').val();
                    }
                },
                rownumbers: false,
                rownumWidth: 40,
                gridview: true,
                pager: '#paging',
                sortname: 'idfac',  
                viewrecords: true,
                sortorder: "desc",
                caption: "",
                ondblClickRow: function(rowid,iRow,iCol,e){
                    var rowData = jQuery(this).getRowData(rowid);
                    console.log(rowData);
                    window.location = "ecrancommandebar.html?num="+rowData.numfac;
                }
            });

            $("#factures").jqGrid('navGrid','#paging',{del:false,add:false,edit:false});
            loadfacture  = true;


        }else{          

            var grid = $("#factures");
                   grid.trigger("reloadGrid",[{current:true}]);

        }

    });

I built this piece of code by reading the forum on the same subject but the grid load the first time then when I click on the button after changing the date nothing happens.

What is wrong with you? Thank you for your feedback.

Answer 1

You use loadonce:true option which changes datatype from initial "json" to "local" after the first loading of the data from the server. It allows to support local sorting, paging and filtering of data. So you should understand that grid.trigger("reloadGrid",[{current:true}]); will just reload the data from previously saved previous response. So no reloading from the server will take place till you reset the value of datatype parameter to "json". In other words you should rewrite else part to about the following

...
} else {          
    $("#factures").jqGrid("setGridParam", {datatype: "json"})
        .trigger("reloadGrid", [{current: true, page: 1}]);
}

Answer 2

You can try with this:

}else{          
   var grid = $("#factures");
   $.ajax({
      url: "loadfactureencours.json",
      dataType: "json",
      success: function(data){
          grid.trigger("reloadGrid",[{current:true}]);
      },
      error: function(){}
   });

}