sending post request and displaying data in jqgrid

Question

Guys I need some help here, I am posting data from AJAX POST to controller, I am getting all the parameters in controller and from controller I am returning list. What I want is to display the list as a table in jqgrid but right now I am not getting any data in my jqgrid. on sucess I am calling jqgrid to display the data , I beleive I am doing something wrong there . Below is my code example any help will be highly appreciated. Looks like content type is messing my jqgrid. in ajax call I have content type as false since I am passing multipart file but from controller I am returning json string, If I put content type or data type as json in ajax calls then my multipart file is not being sent to controller. Can someone throw some light into this issue.

//posting data through ajax
function SubmitButtonOnclick() {
        var pParam = new FormData();
        pParam.append = ("file", $('input[type=file]')[0]).files[0]); //multipart file

        pParam.append("name", $("#name").val());
        pParam.append("country", $("#country").val());
       
        var url="";
        $.ajax({
            type: "POST",
            url: '/process/rdata',
            data: pParam,
            enctype: 'multipart/form-data',
            dataType: 'json',
            contentType: false,
            processData: false,
            success: function (response) {
            //display jq grid on sucess
               $("displayTable").jqGrid('setGridParam',     {url:url, page:1})
            },
            error: function (error) {
                alert("error here");
            }
        });
    }
    
    
    //this is is my jqgrid document on ready
    $(function() {
		$("#displayTable").jqGrid({
		   	datatype: 'json',
			mtype: 'POST',
      altrows:true,
		   	colNames:['Country percent', 'Visited','Name'],
		   	colModel:[
		   		{name:'countryper',index:'countryper', width:90, editable:false},
          {name:'visited',index:'visited', width:100, sortable:false, editable:true, editrules:{required:true}, editoptions:{size:10},formatter:returnEmailUserLink},
		   		{name:'name',index:'name', width:90, editable:true, editrules:{required:true}, editoptions:{size:10}},
		   		
		   	],
		   	
			rowNum:100,
      pager: '#tablepager',
		    viewrecords: true,
		    multiselect: false,
		    loadonce: true,
        jsonReader : {
		        root: "rows",
		        page: "page",
		        total: "total",
		        records: "records",
		        repeatitems: false,
		        cell: "",
		       
		    }
		    loadComplete: function() {
		    	
		});

		$("#displayTable").jqGrid('navGrid','#tablepager',
				{edit:false, add:false, del:false, search:false},
				{}, {}, {}       
		);
		
		
});

<label>upload here to search</label>
<input type="file" id="file" name="file">
<input type="name" id="name" name="name">
<input type="country" id="country" name="country">


<!--for jqgrid-->
<div id="displayTable"></div>
<div id="tablepager"></div>


<!--my controller-->

public List<ModClass> returnData(){


return list;
}

Answer 1

After set the parameter url in jqGrid in success function it is needed to trigger the grid to reload the data.

        success: function (response) {
        //display jq grid on sucess
           $("displayTable").jqGrid('setGridParam',{url:url, page:1}).trigger("reloadGrid");
        },