jQuery Grid Plugin - jqGrid

//load the empty grid

jQuery("#customerResults").jqGrid({

datatype: 'local',

loadonce:true,

colNames:[ 'Address'],

colModel:[ {name:'addrLineTxt',index:'addrLineTxt', editable:false}],

autowidth:true,

height: 'auto',

rowList:[],

pgbuttons:false,

pgtext:null,

viewrecords: true,

pager: '#customerResultPager',

caption:"Customer Search Result",

shrinkToFit: true,

});

 jQuery("#customerResults").jqGrid('navGrid','#customerResultPager',{search:false, add:false, edit:false, del:false}, {}, { }, {}, {} );

//This is event for external form to refresh grid based on certain search criteria.

$("#customerSearchForm").submit(function (e) {

e.preventDefault();

$.ajax({

type:"post",

data: $('form:first').serialize(),

url: $('form:first').attr('action'),

success: function(response){

$('#customerResults').jqGrid('clearGridData');

$('#customerResults').jqGrid().setGridParam({ data: response.rows, datatype:'json', }); //Everything fine till this line. And response.rows has records.

$("#customerResults").jqGrid().trigger("reloadGrid", [{page:1} ]); } }); //This line causes the page to refresh so that Insted of grid with data I see the fresh grid. 

//I see 2 calls made to the server. one to post the result and another one the url of the page containing grid. If I comment trigger("reloadGrid"), I only see one call to server but the data is not refreshed on the grid.

});