JQGrid data doesn't reload on second or subsequent click events...(it loads on first getdata button click)

Question

I am Using JQGrid to display some list of data from db depending on LogID selected from drop down list. ITS displaying contents Correctly on first click. But on all subsequent click nothing happens the page doesn't change or reload or do any thing, but if I try to debug the script I can see that the button click event is fired every time its clicked but still it doesn't bring back the changed LogID data from the db. I am not sure but I think its something related to the reloadGrid trigger ...

  <script type="text/javascript">
    var firstClick = true;
    $(document).ready(function () {
        $('.editor-date > input').datepicker();
        $('.getdata').click(function () {
            if (!firstClick) {
                $("#GridTable").trigger("reloadGrid");
            }
                firstClick = false;
                $('#GridTable').jqGrid({
                    url: '<%= Url.Action("GetData", "Report") %>',
                    datatype: 'json',
                    mtype: 'POST',
                    colNames: ['Log ID'],
                    colModel: [{ name: 'LogID', index: 'MessageLogID', key: true, formatter: pointercursor }],
                    multiselect: true,
                    sortname: 'LogID',
                    sortorder: "asc",
                    viewrecords: true,
                    pager: $('#pager'),
                    rowNum: 20,
                    rowList: [5, 10, 20, 50],
                    postData: {
                        IdParam: $('#testLogID').val()
                    },
                    jsonReader: {
                        repeatitems: false,
                        id: 'LogID',
                        records: 'TotalRecords',
                        total: 'TotalPages',
                        page: 'CurrentPage',
                        root: 'Rows'
                    },
                    loadError: function (xhr, status, error) {
                        messageBox('Error', 'Error occurred loading data.');
                    },
                    height: 'auto',
                    width: 'auto'
                });

            });

I found a similar issue but the solution is not workingjQuery button click refresh of jqGrid only firing once

you are trying to apply the jqGrid on the same element.. maybe it has caching.. that's why you think it's not working — salexch, Jan 20 '13 at 20:20
try clearGridData http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods — salexch, Jan 20 '13 at 20:24
@salexch I am changing the LogID so it should bring new data list from the database but I don't see the new list... do you think this can be related to caching ?? just asking as I am not sure about what is causing this so ready to try anything as time is a major constraint for me right now.... — Scorpio, Jan 20 '13 at 20:29
try each time you click a button to apply jqGrid on new element — salexch, Jan 20 '13 at 20:30
also I think you should use jsGrid methods to updating it, and not brute forcing the same element trying to initialize jsGrid again.. — salexch, Jan 20 '13 at 20:34
I was trying to debug it and realized that the grid is getting updated but its not posting the new LogID to the controller action method that's the reason the method is getting back the list of data for the same ID even if I change the ID in the dropdown list...does anyone know what can be the cause of this behavior.. — Scorpio, Jan 20 '13 at 20:39
I am not changing the url ..GetData is the mvc controller action method and the postData: IdParam: $('#testLogID').val() is the LogId that I am sending to this method to get the list of data depending on the LogID.. — Scorpio, Jan 20 '13 at 20:50

score 3 · Accepted Answer · edited May 23 '17 at 12:03

I think that you should change

postData: {
    IdParam: $('#testLogID').val()
}

to

postData: {
    IdParam: function () {
        return $('#testLogID').val();
    }
}

(see my old answer for more information).

You current code save the value of $('#testLogID').val() at the moment of the grid was created at the first call. Later calls uses the same old value. The usage of function/method inside of postData follows calling the function every time during reloading of the grid. It will be done indirectly: jqGrid use $.ajax which uses $.param which calls the function postData.IdParam.

Additionally I would recommend you to add gridview: true option and change pager: $('#pager') to pager: "#pager" and move the line var firstClick = true; inside of function $(document).ready(function () {...});. I miss additionally } else { part of if (!firstClick) {. It's important to understand that one should create grid once with $('#GridTable').jqGrid({...}); and use only $("#GridTable").trigger("reloadGrid"); later.

David Blanco · Answer 2 · 2018-08-18T22:45:34.253

insert and refresh the jqgrid, see my code.

$("#Tab1").click( function(){ 

 var gridArrayData = [];
   var ids =jQuery("#jqGrid").jqGrid('getGridParam','selarrrow'); 
   var totalRowsCount = ids.length;
   if(totalRowsCount>0)
  {
   $.ajax({ 
     type: "POST", 
     url: 'Operaciones_Grilla.php?Op=30'+'&Filtro='+ids+'&page=1&rows=10', 
     dataType: "json",
     success: function(data) {
  $("#jqGrid2")[0].grid.beginReq();
      var data = data.rows;
  var ii =0;
        for(var i in data)
               {
      gridArrayData.push({
                                id: data[i].id,
                                sistema: data[i].des_sistema,
                                opcion: data[i].des_opciones_sistema,
        id_sistema:data[i].id_sistema,
        id_opcion:data[i].id
        
                            });                            
                }// cierra el for each
       jQuery('#jqGrid2').jqGrid('clearGridData')
                     .jqGrid('setGridParam', {data: gridArrayData})
                     .trigger('reloadGrid');
     $("#jqGrid2")[0].grid.endReq();
      $("#jqGrid2").trigger('reloadGrid');
         }
           }); 
         $('#tabs a[href="#tabs-2"]').trigger('click'); 
         }else{
         alert('debe escoger un registro') ;
     }// cierra el íf que cuenta el numero de registros
 });








//*************** PHP CODE ************************//

Operaciones_Grilla.php?Op=30 call this function:

 public function Sube_Data_Grid_Perfiles22($page,$rows,$filtro)
   {
    
   $respuesta = new stdClass();
      $this->page =$page;
   $this->limit=$rows;
   $sql="";
   $sql='select count(a.*) from opciones_sistema a where a.id_opciones_sistema in  '."(".$filtro.")";
         $count = $this->dbh2->query($sql)->fetchColumn();
   if( $count >0 ) {
                 $total_pages = ceil($count/$this->limit);
               } else {
                 $total_pages = 0;
               }
              if ($this->page > $total_pages)$this->page=$total_pages;
       
             $start = $this->limit*$page - $this->limit; 
           $i=0;

           $Sql='select a.id_opciones_sistema, b.des_sistema,a.des_opciones_sistema, b.id_sistema from opciones_sistema a,sistemas b where a.id_sistema = b.id_sistema and a.id_opciones_sistema in '."(".$filtro.") order by b.id_sistema,a.id_opciones_sistema ";
  
  $stmt = $this->dbh2->prepare($Sql);
  $stmt->execute();
 
  
  
  foreach ($stmt as $row) {
  
          $respuesta->rows[$i]['id']=$row["id_opciones_sistema"];
    $respuesta->rows[$i]['des_sistema']=$row["des_sistema"];
    $respuesta->rows[$i]['des_opciones_sistema']=$row["des_opciones_sistema"];
    $respuesta->rows[$i]['id_sistema']=$row["id_sistema"];
               
                $i++;
  
   
   }// cierra sube data grid

     $this->dbh2 = null;
 
  return json_encode($respuesta);
 
 
  
   
}// cierra metodo suba data grid

JQGrid data doesn't reload on second or subsequent click events...(it loads on first getdata button click)

2 Answers2