JqGrid fail to load data with jDialog

Question

I am using jqGrid to load date from a ColdFusion 9 server. My jQuery version is jquery-1.9.1.

The return format is JSON, and I am using 6 jqGrids on 6 different pages. Plus I have a dialog pop-up on each page.

My problem is that when navigate between grids, and open pop-ups, multiple times the grid stops loading any data and shows white space instead of columns! I have to refresh the browser in order to make it work.

I have searched a lot but with no result. How can I fix this issue?

This is how I call each grid:

$("#DRIVERNNPN_InquiryGrid_similar").jqGrid({
    datatype: "local",mtype: "POST",position:"center",closeOnEscape: false,
    colNames: [ NAME,DLN, DLDATE,NATIONAL_NUM,MOBILE],
    colModel: [
        { name: "NAME", width: 150 , align: "center", sortable:true},               
        { name: "DLN", width: 150 , align: "center", sortable:true},
        { name: "DLDATE", width: 150 , align: "center", sortable:true},
        { name: "NATIONAL_NUM", width: 150 , align: "center", sortable:true},
        { name: "MOBILE", width: 350 , align: "center" , sortable:true},
        //{ name: "ACTIONLINK", width: 25 , align: "center" , sortable:false, formatter: "image"},              
    ],
    pager: "#pager2",refresh:false,rowNum: 5,sortname: "capacity",sortorder: "asc", 
    loadComplete: function(data) {
        showLoadingMsg(false);
    },
    viewrecords: true,gridview: true,scrollOffset: 0,autoencode: true,direction: "rtl", altRows:false,height: "200px",
    postData: {},       
    jsonReader: {
        root: "ROWS", page: "PAGE",total: "TOTAL",records:"RECORDS",userdata:"USERDATA",cell: "",id: "0"
    } 
}); 

and this is how I open the pop-up:

$(function() {   
$( "#dialog-SearchBlacklist" ).dialog({
  autoOpen: false,
  height: 180,
  width: 320,
  modal: true,
  close: function() {
     $( this ).dialog( "close" );
     $(document).unbind();
     $(':input').each(function() {
     this.value = "";
 });
  },
  show: {
    effect: "blind",
    duration: 250
  },
  hide: {
    effect: "fold",
    duration: 250
 }

});

and here is the part from the coldfusion side:

<cffunction name="inquiryTN" access="remote" returnFormat="json" securejson="no">
<cfquery name="qry_TNPermits">
    select PN,TN,statuscode from Trucks
</cfquery>

<cfset userdata = {type="Error",msg="Error"}>
<!--- Get JSON Format for the grid from a private function --->
<cfset strReturn = getGridJSONFormat(Arguments.page,Arguments.rows,qry_TNPermits,
                    'PN,TN,statuscode',userdata)>       
<cfreturn strReturn>

and

<cffunction name="getGridJSONFormat" access="public" retunformat="json">
<cfargument name="page" type="numeric" required="no" default="1">
<cfargument name="rows" type="numeric" required="no" default="10">
<cfargument name="qryRecords" type="query" required="yes">
<cfargument name="COLUMNLIST" type="string" required="yes">
<cfargument name="userdata" required="no" default="">

<cfset var arrRecords = ArrayNew(1)>
<cfset var start = 0>
<cfset var end = 0>
<cfset var totalPages = 0>      
<cfset var i = 1>
<cfset strReturn = "">      

<cfset start = ((arguments.page-1)*arguments.rows)+1>
<cfset end = (start-1) + arguments.rows>

 <cfloop query="qryRecords" startrow="#start#" endrow="#end#">
     <cfset var temp = arrayNew(1)>             
     <cfloop array="#ListToArray(arguments.columnList)#" index="col">
     <cftry>
         <cfset var tempVar= qryRecords[col]>
     <cfcatch type="any">
        <cfset var tempVar= ''>
     </cfcatch>
     </cftry>   

        <cfset ArrayAppend(temp ,tempVar)>              
     </cfloop>  
     <cfset arrRecords[i] = temp> 
     <cfset ArrayClear(temp)>
     <cfset i = i + 1> 
</cfloop>

<cfset totalPages = Ceiling(qryRecords.recordcount/arguments.rows)>

<!--- The JSON return --->
<cfset strReturn = {total=#totalPages#,page=#Arguments.page#,records=#qryRecords.recordcount#,rows=arrRecords,userdata=#userdata#}>          
<cfreturn strReturn>