ColdFusion.navigate works with non-CF generated UI items

This post is more than 2 years old.

Scott just pinged me with an interesting question - can you use ColdFusion.navigate with a "normal" div or does it only work with items generated by ColdFusion 8 (cfdiv, cfwindow, cfpod, etc)? We both tested and discovered that - yes - you certainly can use it with a "vanilla" div - but you must get ColdFusion to preload the proper JavaScript files. Consider this simple demo:

<cfajaximport />

<script> function doit() { ColdFusion.navigate('test3.cfm','booger') } </script>

<a href="javaScript:doit()">load the booger</a><br /> <div id="booger"></div>

Starting from the bottom up - the div, booger, is our container. I have a test link above it that runs the doit function. doit() then simply uses ColdFusion.navigate. If you just use that portion of the file, though, you will get a client-side JavaScript error saying that ColdFusion doesn't exist. You need to tell ColdFusion to load the the Ajax libraries. This can be done with a simple, empty cfajaximport tag.

Not sure how useful this is, but if you don't have Spry or jQuery loaded and need a simple and fast way to load data via Ajax, this would work well.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Patrick posted on 12/17/2008 at 5:17 AM

Not sure this is directly related but is it possible to reset a div or cfdiv back to what was originally in it without it behind saved/bound in another file? For example I have a button that when you click it changes MYDIV to be bound to another page, but I also want to have a reset button that changes MYDIV back to its original contents, ie: <cfdiv id="mydiv">stuff that was originally here</cfdiv>

Comment 2 by Francois Levesque posted on 12/17/2008 at 5:40 PM

Patrick,

If you don't want to save the original contents in a file, you can always assign it's html content in a javascript variable.

i.e: var oldContents = document.getElementById( "booger" ).innerHTML;

or, with jQuery: var oldContents = $( "#booger" ).html();

then, with your reset, you could just reassign the contents to your div

document.getElementById( "booger" ).innerHTML = oldContents;

or

$( "#booger" ).html( oldContents );

Comment 3 by Yaron Kohn posted on 12/18/2008 at 12:31 AM

Wow...I actually knew something before Ray did. I shall remember this day....

Comment 4 by Raymond Camden posted on 12/18/2008 at 12:34 AM

I actually knew this four years ago, I was just holding on to it until I had a slow blog day.

:P

Comment 5 by Thiago Mambretti posted on 8/25/2009 at 10:54 PM

Ray, need your help!

I have a <script> on the page I'm loading using ColdFusion.navigate but it seems CF just ignore it when it posts the content on the containert I specified on the ColdFusion.navigate.

Is this the normal behavior? Is there a workaround? Or it's just me doing something wrong?

Comment 6 by Raymond Camden posted on 8/26/2009 at 6:26 PM

Most likely you are running into the issue with Ajax-loaded content and JS. You can't define functions using function syntax on a page that is loaded via Ajax. You must create functions using this syntax:

foo = new function() { ..... }