jqGrid ondblClickRow not working as desired - php

Question

I am a newbie to jqgrid and I am using jqgrid for displaying data along with codeigniter.
these are my grids:
grid 1
Student Table
<table id="list"></table>
<div id="pager"></div>
grid 2
Tutor Table
<table id="list1"></table>
<div id="pager1"></div>
I am loading a second grid when a user is double clicking on a row of the first grid.
My jqgrid code is:
<script type="text/javascript">
$(document).ready(function (){
var lastSel;
jQuery("#list").jqGrid({
url:'<?php echo $base_url.'index.php/demo/loadData'?>', //another controller function for generating data
mtype : "post", //Ajax request type. It also could be GET
datatype: "json", //supported formats XML, JSON or Arrray
colNames:['Name','Email','Passport','Phone','Fax','Address','Note'], //Grid column headings
colModel:[
{name:'name',index:'name', width:100, align:"left",editable:false},
{name:'email',index:'email', width:150, align:"left",editable:false},
{name:'passport',index:'passport', width:100, align:"right",editable:true},
{name:'phone',index:'phone', width:100, align:"right",editable:false},
{name:'fax',index:'fax', width:100, align:"right",editable:true},
{name:'address',index:'address', width:100, align:"right",editable:true},
{name:'note',index:'note',width:100,align:"right",editable:true},
],
rowNum:10,
width: 750,
//height: 300,
rowList:[10,20,30],
pager: '#pager',
sortname: 'id',
viewrecords: true,
rownumbers: true,
gridview: true,
caption:"List Of Students",
ondblClickRow:function(id){
if(id && id!==lastSel){
jQuery('this').restoreRow(lastSel);
lastSel=id;
}
// alert(id);
jQuery("#list1").jqGrid({
url:"<?php echo $base_url.'index.php/demo/load_tutor_data/'?>"+$('#'+id).children("td[aria-describedby='list_passport']").html(), //another controller function for generating data
mtype : "post", //Ajax request type. It also could be GET
datatype: "json", //supported formats XML, JSON or Arrray
colNames:['Name','Email','Passport','Phone','Fax','Address','Note','Assign',''], //Grid column headings
colModel:[
{name:'name',index:'name', width:100, align:"left",editable:false},
{name:'email',index:'email', width:150, align:"left",editable:false},
{name:'passport',index:'passport', width:100, align:"right",editable:true},
{name:'phone',index:'phone', width:100, align:"right",editable:false},
{name:'fax',index:'fax', width:100, align:"right",editable:true},
{name:'address',index:'address', width:100, align:"right",editable:true},
{name:'note',index:'note',width:100,align:"right",editable:true},
{name: 'checkbox', index: 'checkbox', align:"center",editable: true,
edittype: 'checkbox', editoptions: { value: "True:False" ,defaultvalue:"False" },
formatter: "checkbox", formatoptions: { disabled: false} },
{name: 'myac', width:80, fixed:true, sortable:false, resize:false, formatter:'actions',
formatoptions:{keys:true}},
],
rowNum:10,
width: 750,
//height: 300,
rowList:[10,20,30],
pager: '#pager1',
sortname: 'id',
viewrecords: true,
rownumbers: true,
gridview: true,
caption:"List Of Tutors",
onSelectRow:function(id){
alert("Assign Here");
},
onCellSelect:function(rowid, iCol, cellcontent, e){
if(iCol==8)
alert("make submit");
},
editurl:"<?php echo $base_url.'index.php/demo/load_tutor_data'?>"
}).navGrid('#pager1',{edit:false,add:false,del:false});
$("#admintask").show();
},
editurl:"<?php echo $base_url.'index.php/demo/loadData'?>"
}).navGrid('#pager',{edit:false,add:false,del:false});
$("tr").click(function(){
alert("test");
});
});
$("#bsdata").click(function(){
jQuery("#list").jqGrid('searchGrid',
{sopt:['cn','bw','eq','ne','lt','gt','ew']}
);
});
$("#bedata").click(function(){
var gr = jQuery("#list").jqGrid('getGridParam','selrow');
if( gr != null ) jQuery("#list").jqGrid('editGridRow',gr, {height:280,reloadAfterSubmit:false});
else alert("Please Select Row");
});
$("#list").hover(function(){
var gr = jQuery("#list").jqGrid('getGridParam','selrow');
});
$("#test1").click(function(){
$("#admintask").hide();
});
</script>
When I double click for the first time on a row in student table, it works fine. But when I double click on other row in the student table, it is showing the same data. I checked in the network of browser and it is not posting anything to the network as well.
Please let me know where am I making the mistake.

Answer 1

You have to unload the #list1 grid before loading, like below,
$("#list1 ").jqGrid('GridUnload');
jQuery("#list1").jqGrid({ ...............});