Jan 17
Nesting of CFLAYOUT creating problem with ColdFusion.navigate
ColdFusion , ColdFusion 9 Add commentsToday I came across problem with CFLAYOUT tag and ColdFusion.navigate problem. It was working in ColdFusion 8 but same code doesn't work with ColdFusion 9. Actually when I use simpler version it work fine in both 8 and 9 but when I use little complex CFLAYOUT then it doesn't work with CF9. Let me show you both example which work/not work with CF9 respectively.
Example 1: (Work with both version CF8 & CF9)
<html>
<head>
<script type="text/javascript">
function loadArea()
{
ColdFusion.navigate("area1.cfm","area1"); //Load content of area1.cfm into left panel
ColdFusion.navigate("area2.cfm","area2"); //Load content of area2.cfm in center panel
}
</script>
</head>
<body>
<!--- Simple CFLAYOUT with border type --->
<cflayout type="border" name="borderlayout" style="height:200px">
<cflayoutarea title="Area 1" position="left"
name="area1"
closable="true"
collapsible="true" splitter="true"
style="background-color:##FF00FF; height:100%;width:300px">
</cflayoutarea>
<cflayoutarea position="center" name="area2" style="background-color:##FFFF00; height:100%">
</cflayoutarea>
</cflayout>
<!--- Load area1 and area2 through ajax.--->
<a href="#" onclick="loadArea()">Load Remote content</a>
</body>
</html>
Output:
Example 2: (Work with CF8 but not in CF9)
<html>
<head>
<script type="text/javascript">
function loadArea()
{
ColdFusion.navigate("area1.cfm","area1");
ColdFusion.navigate("area2.cfm","area2");
}
</script>
</head>
<body>
<cflayout type="vbox">
<cflayoutarea style="height:200px;overflow:hidden">
<cflayout type="border" name="borderlayout" >
<cflayoutarea position="left" name="area1" style="background-color:##ff00ff;height:100%;width:300px;" collapsible="true" title="Area1">
</cflayoutarea>
<cflayoutarea position="center" name="centerarea">
<cflayout type="vbox">
<cflayoutarea name="toparea" style="background-color:##FF0000;height:60px;width:100%;overflow:hidden"></cflayoutarea>
<cflayoutarea name="area2" style="background-color:##FFFF00;height:140;width:100%;overflow:hidden"></cflayoutarea>
</cflayout>
</cflayoutarea>
</cflayout>
</cflayoutarea>
</cflayout>
<a href="#" onclick="loadArea()">Load Remote content</a>
</body>
</html>
Here is same kind of code but with nesting of CFLAYOUT. I got success to load left panel content but got javascript error (element not found area2).
Output:
You can see that Area1 get loaded successfully but get error while loading area2. As a solution change name of layout area and add cfdiv/div tag as child of layout area with id = "area2" and it get work fine for me.
<cflayoutarea name="layoutarea2" style="background-color:##FFFF00;height:140;width:100%;overflow:hidden"> <cfdiv id="area2"></cfdiv> </cflayoutarea>
Jul 29, 2010 9:22 PM
Apr 26, 2010 at 6:03 AM Try this code :
ColdFusion.navigate("area1.cfm","cf_layoutareaarea1");
ColdFusion.navigate("area2.cfm","cf_layoutareaarea2");
Apr 26, 2010 at 9:47 AM Thanks Amary for code.
But my point is when it is work with
ColdFusion.navigate("area1.cfm","area1"); ColdFusion.navigate("area2.cfm","area2");
without nesting of layout area but when I try with after nesting it doesn't work. It was working fine in Coldfusion 8 for both cases.
Apr 30, 2010 at 3:57 AM At a quick glance... position=center CAN NOT have a style in CF9