ColdFusion.navigate alternative?

Question

In another question, "Using Google Map with ColdFusion", I ran into a problem of not able to display a google map using CF. After much experimenting, I found out that if you use ColdFusion.navigate to point to a page from one cflayoutarea to another cflayoutarea, the map in the destination cflayoutarea would not show. (However, if you just run the page, both by itself or when it is inside the destination cflayoutarea, the map will show)

So my question now is: is there an alternative approach where I don't need to use coldfusion.navigate to navigate from one cflayoutarea to another?

Answer 1

Your English isn't great, so I'm going to paraphrase to a question that makes sense (to me) and answer that question...

It sounds like you have 2 CFLayoutArea's, and you want to have a link (or button, etc) in one of them that will change the contents of the other.

If you're eliminating ColdFusion.navigate as an option, then it seems to me you're going to have to try one of a few other options that are all basically the same thing. I like jQuery. If you don't like jQuery, you can use another library, or roll your own solution, but they will all do the same job.

Since this code:

<cflayout name="foo" type="hbox">
 <cflayoutarea name="nav">nav</cflayoutarea>
 <cflayoutarea name="content">content</cflayoutarea>
</cflayout>

Produces this HTML:

<div  id="foo">
 <div  id="nav" style="overflow:auto;float:left;">
  nav
 </div>
 <div  id="content" style="overflow:auto;float:left;">
  content
 </div> 
</div>

You can use the ID attribute of the content DIV, with jQuery, to change its contents:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
 $(document).ready(function(){
  $("#goLink").click(function(e){
   $("#content").load("content.cfm");
   e.preventDefault();
  });
 });
</script>
<cflayout name="foo" type="hbox">
 <cflayoutarea name="nav"><a href="#" id="goLink">go</a></cflayoutarea>
 <cflayoutarea name="content">content</cflayoutarea>
</cflayout>