thecfguy

A Unique Developer

Nesting of CFLAYOUT creating problem with ColdFusion.navigate

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>