How can I filter using keyup event in JQGRID?

Question

hi this is my code :

$("#txName").keyup(function(){
  var contributie = $('#txName').val();
  $.get( "/contributii/populateGrid/", { contributie: contributie} )
    .done(function( data ) {
      jQuery("#contributionList").trigger("reloadGrid");
    });

});

jQuery("#contributionList").jqGrid({ 
    url:'/contributii/populateGrid/', 
    datatype: "json", 
    colNames:['Data','Titlu', ' ','Autor','Categorie'], 
    colModel:[ 
      {name:'data',index:'data', width:'300px'},  
      {name:'titlu',index:'titlu', width:'400px'}, 
      {name:'comentarii',index:'comentarii', width:'100px'},
      {name:'autor',index:'autor', width:'200px'},
      {name:'categorie',index:'categorie', width:'400px'}
    ], 
    rowNum:10, 
    viewrecords: true, 
    sortorder: "desc",
    height:'auto'
});

This code return me always the same grid because it executed two times on keyup events. I would like to know how can i handle this? thx

Answer 1

Solution :

jQuery("#contributionList").jqGrid({ 
    url:'/contributii/populateGrid/', 
    postData: {
        contributie: function() { return $("#txName").val(); }
    },
    datatype: "json", 
    colNames:['Data','Titlu', ' ','Autor','Categorie'], 
    colModel:[ 
      {name:'data',index:'data', width:'300px'},  
      {name:'titlu',index:'titlu', width:'400px'}, 
      {name:'comentarii',index:'comentarii', width:'100px'},
      {name:'autor',index:'autor', width:'200px'},
      {name:'categorie',index:'categorie', width:'400px'}
    ], 
    rowNum:10, 
    viewrecords: true, 
    sortorder: "desc",
    height:'auto'
});

Answer 2

Try this:

    jQuery("#contributionList").jqGrid({ 
    url:'/contributii/populateGrid/',
    postData: {
        contributie: $("#txName").val()
    },
    mtype: 'POST',
    datatype: "json", 
    colNames:['Data','Titlu', ' ','Autor','Categorie'], 
    colModel:[ 
      {name:'data',index:'data', width:'300px'},  
      {name:'titlu',index:'titlu', width:'400px'}, 
      {name:'comentarii',index:'comentarii', width:'100px'},
      {name:'autor',index:'autor', width:'200px'},
      {name:'categorie',index:'categorie', width:'400px'}
    ], 
    rowNum:10, 
    viewrecords: true, 
    sortorder: "desc",
    height:'auto'
});

// Keyup event
$("#txName").keyup(function(){
    jQuery("#contributionList").jqGrid('setGridParam', {
        url:'/contributii/populateGrid/',
        postData: {
            contributie: $("#txName").val()
        },
   }).trigger('reloadGrid');
});