Executing JavaScript functions from within ColdFusion 8 containers

This post is more than 2 years old.

This morning a discussion came up on cf-talk about how to run JavaScript functions from within ColdFusion 8 containers. (What do I mean by 'container'? I mean any of the new Ajax UI elements like the Pod or Window.) The person asking the question was trying to use ColdFusion.navigate. I can see how you could possibly think this would work. One way to run JavaScript functions is with links, as in:

<a href="javascript:test()">Run test()</a>

But that isn't what you want to use here. Instead - the solution is much simpler. When you use containers, they execute in the context of the page itself. That means you can run any code using the same type of code I used above. Consider this full example:

<script> function parentSayHi() { alert("Hi, I'm the parent, and I'm saying hi."); } </script>

<p> <a href="javascript:parentSayHi()">Test parentSayHi</a> </p>

<cfpod title="My Pods Rock the Casbah"> Another <a href="javascript:parentSayHi()">test</a>. </cfpod>

<cfpod title="The iPod Pod" source="test3.cfm" />

In this example I've created a simple JavaScript function, parentSayHi. I then show an example of what I describe above - a link that runs the function.

The next block of code shows an inline cfpod tag. Notice again though the simple link to run the function.

Lastly I have a pod that uses an external source. The code for this file is:

Yet another <a href="javascript:parentSayHi()">test</a>.

As you can see - it too is a simple link. When run, all three of these links have no problems running the JavaScript function.

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 Raul Riera posted on 12/28/2007 at 1:44 AM

Have you tried running Spry on CF containers? I have been unsuccessful in doing so.

Comment 2 by Raymond Camden posted on 12/28/2007 at 1:47 AM

Spry is a bit more than one JS function, so I'd be surprised if it worked. I'd also be curious as to _why_ you would use it? I use Spry to load data via AJAX which lets my page appear to load quicker. If I'm using an Ajax based container then using Spry seems redundant to me.

Comment 3 by Cyrill posted on 12/29/2007 at 12:05 AM

Ray,

My main reason for trying was to use spry form validation. Have not figured this out so far either.

Comment 4 by Cyrill posted on 12/29/2007 at 2:46 AM

I decided to go back and re investigate this issue a bit further. Firebug shows that spy validation libraries are loaded as well as the special spry CSS styles. The hidden spans are hidden as they supposed to.

If I place the alert code before or after the widget code as Ray suggested in another thread, it works and alert is fired.

The spry validation, however still does not work. Even if I set it to validate on blur and change.

The same exact code works with spry HTML panel

I will keep you posted if I find anything further.

Comment 5 by Raymond Camden posted on 12/29/2007 at 2:47 AM

Got the code online anywhere?