Today 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>