jqgrid does not render on coldfusion page
I am trying to render jqGrid on coldfusion page but no matter what I try it doesn't work. may be someone can see what I am missing. When i make selection on first page it makes call to second page, and from there according to selection it calls third page which renders jqgrid. On the cfm page for whatever reason it doesn't render the grid. but when i run test_3.cfm by itself the grid renders. any suggestions is appreciated...
[code]
main.cfm
<cfset var = "1">
<cfform name="test" method="post" action="test_1.cfm">
<table>
<tr>
<td>sel1</td>
<td>
<cfselect name="sel1" bind="cfc:myCFC.getSel.selFirst('#var#')"
display="test" value="test" BindOnLoad="true" />
<!---doesn't work <option name="0">--Select Report--</option></cfselect>--->
</cfif>
</td>
</tr>
</table>
</cfform>
<cfdiv
bind="url:test_1.cfm?sel={sel1}"></cfdiv>
test_1.cfm
<cfset sel = #URL.sel#>
<cfif #sel# eq 'check'>
<cfdiv
bind="url:test/test_2.cfm">
<cfelse>
<cfdiv
bind="url:test/test_3.cfm">
</cfif>
test_2.cfm
<cfoutput>dummy test</cfoutput>
test_3.cfm
<html>
<head>
<script type"all the jquery and jqgrid libraries"></script>
<script type="text/javascript">
$(document).ready(
function(){
$("#list").jqGrid(
{
sortable: 'true',
altRows: 'true',
url:myCFC.cfc?method=getSel3,
datatype: 'json',
colNames:['tnval','snval'],
colModel :[
{name:'tnval',index:'tnval', width:30, sorttype:'text'},
{name:'snval',index:'snval', width:30, sorttype:'text'}
],
pager: '#pager',
rowNum:50,
rowList:[50, 100],
sortorder: 'asc',
sortname: 'tnval',
viewrecords: true,
caption: 'test',
height: 'auto',
mtype:'GET',
autowidth: true,
rownumbers: true,
gridview: true,
recordtext: '{0} - {1} of {2}',
jsonReader: {
root: "ROWS",
page: "PAGE",
total: "TOTAL",
records: "RECORDS",
repeatitems: true,
cell: "",
id: "0"
}
});
});
$("#list").navGrid(
"#pager",{edit:false,add:false,del:false,search:false,refresh:true});
</script>
</head>
<body>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</body>
</html>
[\code]
AdChoices