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 working jQuery button click refresh of jqGrid only firing once

Answer 1

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.

Answer 2

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