ColdFusion 8: AJAX UI Windows

I've been blogging about new ColdFusion UI controls in ColdFusion 8 and today I'm discussing CFWINDOW. First - CFWINDOW does not - as you might guess - create a popup window. Which is probably a good thing. The last thing this world needs is another popup window. Instead the tag creates a "virtual" window that appears on top of your page. Let's take a look at a few examples.

At the simplest level, all you need to for a window is:

<cfwindow> This is a window. </cfwindow>

But if you run this, nothing shows up! Turns out that by default, windows are hidden. To make a window show up right away, you would do:

<cfwindow initShow="true"> This is a window. </cfwindow>

You can see an example of this here.

So this isn't terribly exciting so far, so let's add a bit of meat to it:

<cfimage action="info" source="lolcat1.jpg" structName="cat"> <cfwindow initShow="true" title="Welcome to <CFWINDOW>" center="true" modal="true" resizable="true" draggable="false" height="#cat.height#"> <img src="lolcat1.jpg" align="left"> This is a cat. </cfwindow>

So this example begins by using cfimage to get information about an image. I use that information to supply a height to my window. I'm also using a few more attributes:

Title - This sets the title of the window.
Center - This centers a window.
Modal - This makes the window have focus - it also does a cool "gray" effect on the rest of the page.
Resizable - This lets you resize the window.
Draggable - This lets you enable window moving (I turned it off)
Height (and Width) - This lets you size the window.

You can see an example of this here.

As with other UI controls, you have some options for changing the look of the window as well:

<cfwindow initShow="true" title="Styling Window" center="true" height="400" width="400" bodyStyle="font-family: verdana; color: ##ff0000;" headerStyle="font-family: verdana; background-color: black; color: white"> <p> This is a window with a bit more text in it. It is fairly interesting in a not-so-interesting way. A bit like Paris Hilton </p> </cfwindow>

You can see an example of this here.

You can also supply a source as well:

<cfwindow initShow="true" title="My Cat" center="true" source="cat2.html" height="360" />

You can see an example of this here.

Again - like the other controls, there is a nice JavaScript API to work with the windows. For example, you an show and hide a window:

<cfwindow initShow="false" title="Welcome to <CFWINDOW>" center="true" resizable="true" draggable="false" name="mywin"> Hi, I'm a window. <form> <input type="button" value="Close Me!" onClick="ColdFusion.Window.hide('mywin')"> </form> </cfwindow> <p> <a href="javaScript:ColdFusion.Window.show('mywin')">Show Window</a><br /> <a href="javaScript:ColdFusion.Window.hide('mywin')">Hide Window</a><br /> </p>

This example uses the ColdFusion.Window.show/hide API to, well, show and hide my window. Also note I added a button inside the window itself. This gives the user 3 ways to close the window. The X button in the upper right hand corner of the window. The button in the form. Lastly - the link.

You can see an example of this here.

You may also register handlers for the show/hide event using ColdFusion.Window.onShow/onHide:

<html> <head> <script> function showWindow(name) { alert('You just showed ' + name); } function hideWindow(name) { alert('You just hid ' + name); } setup = function() { ColdFusion.Window.onShow('mywin1', showWindow); ColdFusion.Window.onShow('mywin2', showWindow); ColdFusion.Window.onHide('mywin1', hideWindow); ColdFusion.Window.onHide('mywin2', hideWindow); } </script> </head> <body> <cfwindow initShow="false" title="Window 1" name="mywin1"> Window 1 </cfwindow> <cfwindow initShow="true" title="Window 2" name="mywin2"> Window 2 </cfwindow> <p> <a href="javaScript:ColdFusion.Window.show('mywin1')">Show Window 1</a><br /> <a href="javaScript:ColdFusion.Window.hide('mywin1')">Hide Window 1</a><br /> <a href="javaScript:ColdFusion.Window.show('mywin2')">Show Window 2</a><br /> <a href="javaScript:ColdFusion.Window.hide('mywin2')">Hide Window 2</a><br /> </p> </body> </html>

In this example, I simply register handlers for the show/hide event for my two windows. Only one argument is passed to the window, the name of the element. Note this is not the same as the name you provide. I'm assuming it is a random/unique ID that is used by ColdFusion.

You can see an example of this here.

Lasstly - this is the only UI control that can be completely created from within JavaScript. (The tab control lets you add a tab, but you can't create the entire control.) By using ColdFusion.Window.create, you can create a window with any option you choose. For my last example, I create a form and use the following JavaScript to create a window:

<script> function makeWindow() { var title = document.getElementById("title").value; var width = document.getElementById("width").value; var height = document.getElementById("height").value; var cbCentered = document.getElementById("centered"); if(cbCentered.checked) centered = true; else centered = false; var config = new Object(); config.width = width; config.height = height; config.centered = centered; ColdFusion.Window.create('main'+Math.random(),title,'cat2.html',config); } </script>

Note the use of a random number on the window name. Right now there is no (as far as I can tell) way to destroy a window. I was able to hide a window in the beginning of a function, but hiding it didn't destroy it. So if you changed settings and hit the button, you always got the first window back. I'm not doing any type of real validation, so be gentle on this You can see an example of this demo.

One JavaScript API I didn't cover is ColdFusion.Window.getWindowObject. This gives you access to the underlying JavaScript object.

Comments

[Add Comment]

One other note about UI controls in general and cfwindow. I'm lazy so I'll quote the docs:

"You can use the special controlName_body variable to access and change the body
contents of the specified control. For example, you can use the
controlName_body.innerHTML property to set the body HTML. For cfpod and
cfwindow tags, you can also use the controlName_title to get or set the control’s title
bar contents."

# Posted By todd sharp | 6/20/07 8:29 AM

i can has invisible windows?

This sounds both intriguing and dangerous. Good for background processing, preloading or something like that, but on the other hand I forsee it being misused in some nefarious way.

# Posted By RobW | 6/20/07 10:15 AM

How would it be dangerous? It is no different than a hidden form field. A hidden div. Or anything else.

# Posted By Raymond Camden | 6/20/07 10:23 AM

Hey, it's about time we started using CF nefariously. :P

# Posted By Todd | 6/20/07 11:17 AM

Great stuff Ray! It should also be noted that, for those who need far more advanced functionality than is available through the ColdFusion JavaScript API, the rendered components are created from the ExtJS UI library (formerly the Yahoo UI). If you prototype an application with these components, but find that you require more advanced control, you can programmatically create the same (or similar) components by including the libraries directly and writing custom functionality. It is outstanding that you can do this base level functionality very quickly and easily with CFML, and then continue with a consistent interface should you require more.

# Posted By Cutter | 6/20/07 12:55 PM

My only complaint so far is this:

In your initial example (the simplest one), take a look at the source. That's a whopping 12 js includes, along with 3 CSS includes.

This totals up to huge 552KB. For one window.

...

As a comparison, this entire blog page (at this point in the comments), totals only 216KB. Including all images, etc.

That's pretty insane, I think. Pick up jquery and you can do the same thing in about a tenth of the size, and debatably, the same ease with more functionality.

-Chris Dary

# Posted By Chris Dary | 6/22/07 1:42 PM

Chris, this has been discussed before. Adobe is aware of this. Do not forget that this is a pre-release.

# Posted By Raymond Camden | 6/22/07 1:50 PM

on the last method where you create a cfwindow using javascript, how do you apply styles to it such as headerStyle and bodyStyle?
I have the following in the head section, but I would like to change the colors/fonts. do I need a separate css style?

<script>
function ebWindow() {
ColdFusion.Window.create("EB","Entered By Details","/EmployeeInfo.cfm?eid=<cfoutput>#val(Session.worklogInstance.EnteredBy)#</cfoutput>",
{x:100, y:20, resizable:true, height:317, width:527, modal:false, closable:true, draggable:true});
}
</script>

# Posted By Michael White | 8/24/07 2:07 PM

It looks like you can't. :( I guess you would need to use an inline cfwindow instead.

# Posted By Raymond Camden | 8/24/07 2:09 PM

I found the css style sheet that handles that and changed a couple of settings but not sure how to over-ride those settings on my page.

CFIDE\scripts\ajax\resources\ext\css\ext-all.css
the sections i'm looking at :
.x-dlg .x-dlg-hd
.x-dlg .x-dlg-dlg-body

# Posted By Michael White | 8/24/07 3:18 PM

as I dug a little deaper... if found the documentation folder that said there were four "skins" but the directory the css was pointing to only had the "default" directory. well the other directories are there but they are at:
CFIDE\scripts\ajax\ext\resources\images. I found I could change the images to use the other color schemes if I wanted.

# Posted By Michael White | 8/24/07 3:41 PM

and here's another thing... if you're using cfdiv to layout some areas, use cfmenu to do a ColdFusion.navigate to change the content of a cfdiv (in this case a form) and you want to create and display a cfwindow using a link or a button, it doesn't seem to work. Maybe I'm doing it wrong.
How do you use ColdFusion.Window.create() from within a cfform within a cfdiv?

# Posted By Michael White | 8/24/07 6:57 PM

I got it working by using a long onClick line instead of calling a function:
onClick="ColdFusion.Window.create('MC','Main Contact Details','/EmployeeInfo.cfm?eid=#val(Session.worklogInstance.EmployeeID)#', {x:150, y:25, resizable:true, height:320, width:520, modal:false, closable:true, draggable:true});"

# Posted By Michael White | 8/24/07 7:35 PM

I've noticed that if I have a cfwindow on a page with a form where i try and set the initial focus on a particular field, setting the focus no longer seems to work. Is there a way around this?

# Posted By brian | 9/21/07 4:03 AM

WHat if you use the CF/JS API to get the window object? Maybe then you can get the DOM inside.

# Posted By Raymond Camden | 9/21/07 8:11 AM

eheheh, Michael said "four skins"

# Posted By TJ Downes | 9/29/07 2:20 PM

What are you - four?

;)

# Posted By Raymond Camden | 9/29/07 5:32 PM

Challenge quiz...
How do you change the title of the window if you are using it more than once on the page? (Reuse that is.) I figured this out for Pods... but it doesn't seem to work for windows.

# Posted By John Farrar | 10/25/07 12:07 AM

John:

Are you saying controlName_title.innerHTML doesn't work?

# Posted By todd sharp | 10/25/07 6:04 AM

It worked for the cfpod but not for the window for some reason.

# Posted By John Farrar | 10/25/07 8:07 AM

I am opening/showing a CFWINDOW from a link using ColdFusion.Window.Show. The CFWINDOW has a CFForm.

The action is on the same page the form is. Works asynch/ajax ok. Then the user can close the cfwindow.

Problem is when/if the user opens the CFWINDOW again, they see the action page result.

How can I have it so each time the CFWINDOW opens, it shows a new blank form? I know that if you use a different window name it works, but in my case the parent page doesn't refresh, so I cannot make the window name change. Refreshing the page is not an option.

# Posted By Fred | 10/25/07 8:34 PM

Fred: If you're using the cfwindow tag just add refreshOnShow="true" (don't you love it when they make it easy on us??).

# Posted By todd sharp | 10/26/07 7:58 AM

John: That is really weird - it works for me. I'd be glad to look at your code to see if I see something weird. Ping me off blog if you'd like...

# Posted By todd sharp | 10/26/07 7:59 AM

Yes that was it. I missed that property. Thanks.

# Posted By Fred | 10/27/07 7:23 AM

maybe this is related to my problem of a ColdFusion.window.create not refreshing? since I'm not using the cfwindow tag there is no refreshOnShow attribute. maybe it's the window refresh that's not happening, it has nothing to do with the query running, it's just hiding and showing the window... like it creates it once and even though I have a create.window tag on each link it thinks it's the same window and just "shows" it

# Posted By Michael White | 11/2/07 8:48 AM

that was it! I was using a static name for the create.window function. when I changed the windows name to a variable that changes with the link the window shows the correct content.

# Posted By Michael White | 11/2/07 8:52 AM

Michael: A different approach would be to call ColdFusion.Window.create() and immediately follow it with a ColdFusion.navigate('url.cfm', 'windowName') which essentially is equivalent to the refreshOnShow attribute.

# Posted By todd sharp | 11/2/07 9:33 AM

that might be a better way to do it. I was so excited when I realized what was happening I had to post though I haven't worked through the ramifications yet. You know what triggered it? a comment on a post by Ben Nadel: http://www.bennadel.com/index.cfm?dax=blog:194.vie... about how to trick coldfusion into not caching a "Select * from tablename" by using an alias for the tablename. Unrelated post but it triggered a connection to a new line of thought.

# Posted By Michael White | 11/2/07 9:50 AM

When I use getWindowObject I get the following error in IE(6&7): "ColdFusion.Window.getWindowObject: No window exists by the name wcl". wcl is the name of the window as specified in the name of the cfwindow tag. However, Mozilla seems to work as expected. Any ideas or experience would be extremely helpful.

# Posted By Terry Beard | 11/6/07 6:49 AM

Terry: Post the code and we'll see if we can spot something (or just send it to me off-blog so we don't spam up Ray's comments here).

# Posted By todd sharp | 11/6/07 7:18 AM

The issue seems to revolve around events in javascript, and not the getWindowObject as I had first suspected. While I have been programming for a long time, I have only recently begun to grasp js, so please go easy on me. My code is as follows:

moveListener = function()
{
if (ColdFusion.Window != null)
{ var w = ColdFusion.Window.getWindowObject('WCLX');
w.on('move',setCoords,w);
}
}

setCoords = function(ob,x,y)
{ window.open('mainmenu.cfm?function=1&win=CL&x=' + x + '&y=' + y,'_self','')
}

On my main page I have a body tag

<body onload="javascript:moveListener()">

Basically what I want to do is when the user moves the window, it automatically saves the coords to a database. This process works like a champ in Mozilla. However, in IE it fails. I am not sure if IE is just being particular or Mozilla is a little less concerned about the order of things.

In my googleations, there seems like there may be an issue with using the onload event in the body tag. But I am just a padawan at this stuff right now.

# Posted By Terry Beard | 11/6/07 10:04 AM

Kudos to you, Todd, as I have swiped your code. Just wanted to make sure I give credit were credit is due. (I have colleagues that would do otherwise)

# Posted By Terry Beard | 11/6/07 10:09 AM

Well you might be best doing the database save with Ajax rather then opening a new window. That could get quite ugly if the window were moved a lot. Also, why not just use cookies?

# Posted By todd sharp | 11/6/07 10:43 AM

I thought about using cookies, but I wanted to values to persist regardless of the computer the user is located at. Instead of a new window opening, the page basically reloads (which is relatively fast considering our infrastructure).

# Posted By Terry Beard | 11/6/07 10:57 AM

I did a cut paste of the original code you had posted, and I received the same error in IE. However, what is interesting is that the coordinates still saved. Hmmmm...now I am really confused.

# Posted By Terry Beard | 11/6/07 11:03 AM

ok...more info and progress!? I changed the initShow to false, and then place a link on the page to call the window (very similar to your example), and while I still received the error first time the page loaded, the coordinates stored when the window was moved around. If I disable the script debugging, while not purdy, might be doable.

# Posted By Terry Beard | 11/6/07 11:24 AM

Ok...never mind - its still not working.

# Posted By Terry Beard | 11/6/07 11:27 AM

The code to capture window position does not work on IE7. It does work on Firefox. I get the error "Exception thrown and not caught." Any ideas? Here is my simple code to repro:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...;
<html xmlns="http://www.w3.org/1999/xhtml">;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

   <script type="text/javascript">
      moveListener = function()
      {
      if (ColdFusion.Window != null)
      { var w = ColdFusion.Window.getWindowObject('testWindow');
      w.on('move',setCoords,w);
      }
      }

      setCoords = function(ob,x,y)
      { alert(x);
      }
   </script>
</head>
<body onload="javascript:moveListener()">
   <CFWINDOW closable="true" initshow="true" name="testWindow">
      Test test
   </CFWINDOW>
</body>
</html>

# Posted By Dustin Snell | 12/14/07 9:53 AM

The solution to the IE problem with the onmove script is as follows:

remove the onload=... from the body tag, and add <cfscript>ajaxOnLoad('moveListener');</cfscript> just before the closing </body>. worked like a charm for me...

Credit: Azadi from HouseofFusion.com CF-Talk list.

# Posted By Dustin Snell | 12/15/07 9:25 PM

Adding basic style elements to the headerstyle and bodystyle can be annoying to figure out so here's a quick example of that too (notice my windowOptions object's headerstyle attribute to be specific)...

   function showTrust() {
      var selectedClientID = ColdFusion.getElementValue('gridClientTrusts','trustSelector','FK_ClientID');
      var selectedTrustID = ColdFusion.getElementValue('gridClientTrusts','trustSelector','PK_TrustID');

      var windowOptions = new Object();
      windowOptions.width = 800;
      windowOptions.height = 600;
      windowOptions.centered = true;
      windowOptions.modal = true;
      windowOptions.resizeable = true;
      windowOptions.initshow = true;
      windowOptions.draggable = true;
      windowOptions.closeable = true;
      windowOptions.headerstyle = 'font-family: verdana; background-color: #0066FF;';

      ColdFusion.Window.create('clientTrust','Client Trust','editclienttrust.cfm?clientID=' + selectedClientID + '&trustID=' + selectedTrustID, windowOptions);
   }

# Posted By Andy Sandefer | 1/28/08 12:58 PM

@Andy: Thanks for posting that example code on how to style the window when using ColdFusion.Window.create. It works great (minor typo though, it should be windowOptions.center = true not centered=true).

# Posted By Jeremy Prevost | 2/26/08 3:30 PM

@Andy: Thanks for your snippet... it was exactly what I was looking for. I did find another typo... "resizeable" should be "resizable".

@Ray: Love the blog, it has been a big help!

# Posted By Richard Baldwin | 3/10/08 2:02 PM

I am currently working on a project that is using cflayout, within one of the tabs there is a link that opened up a popup window that contained a form. When the user submits the form there is javascript that refreshed the content from within one of the tabs on the main page and then closes the window. I am trying to switch the popup window with a cfwindow but I am having alot of trouble getting the cfwindow to close automatically when the form is submitted and for the cfwindow to update tab on the main page as well. Any tips?

# Posted By Gabe | 3/10/08 2:07 PM

You have to use JS code ont he form submit to notice it and close the window. You can use ColdFusion.Ajax.submitForm. Check the docs for that.

# Posted By Raymond Camden | 3/10/08 3:11 PM

Hi Ray, first off, LOVE your tutorials, :-) I am actually having an odd behavior with <cfwindow>

This is what the link looks like: abc.com/page1.cfm?myID=12355431

In page1.cfm, I'm using <cfwindow> via href:

<cfoutput query="">
...
<a href="##" onclick="javascript:ColdFusion.Window.show('MyWindow');">Text</a>
</cfquery>
...

<cfwindow
name="MyWindow"
center="true"
closable="true"
draggable="true"
height="200"
resizable="true"
title="#myQuery.ID#"
width="400">

<form name="te" action="yahoo.com" method="post">
<input type="text" name="name" value=""> <br/>
<input type="hidden" name="name" value="<cfoutput>#myQuery.ID#</cfoutput>"> <br/>
<input type="submit" name="submit" value="submit"><br/>
</form>
</cfwindow>

When I click "Text" link the first time, nothing happens, but the second time the <cfwindow> executes. After spending an hour and countless tries, I realized the only thing each instance had in common was the URL.

Initially the URL was: abc.com/page1.cfm?myID=12355431

After I click on the link the first time (when nothing happens), the URL looks like this: abc.com/page1.cfm?myID=12355431#

When I click the link again, the <cfwindow> works.

Does passing a var in the URL make <cfwindow> act odd? Why would it work if the URL was:
abc.com/page1.cfm#
abc.com/page1.cfm?myID=12355431#

But when the URL is:
abc.com/page1.cfm?myID=12355431

# Posted By Ketan | 3/14/08 9:28 AM

Nothing in the URL should break the Ajax stuff. When you click the first time, do you get a JS error? Don't forget that IE tends to hide JS errors, as does FF sometimes.

# Posted By Raymond Camden | 3/14/08 9:45 AM

Thanks Ray. Can I e-mail you the link to the issue?

# Posted By Ketan | 3/14/08 10:53 AM

Katan - I'm way over booked this month (notice my blogging is way down?) so it may make sense for you to post the link and others here could possible help.

# Posted By Raymond Camden | 3/14/08 11:02 AM

Let's try an experiment. I want you to make the name argument of the window unique. Obviously we can do this many ways but time should suffice as it will never mathematically be what it was a second ago.

   function showBillingBatch(recordAction) {
      var selectedBillingBatchID = ColdFusion.getElementValue('gridBillingBatches','frmBillingBatches','BillingBatchID');
      //alert(selectedBillingBatchID);
      day = new Date();
      var windowID = 'billingBatch' + day.getTime();
      var windowOptions = new Object();
      windowOptions.width = 520;
      windowOptions.height = 400;
      windowOptions.center = true;
      windowOptions.modal = true;
      windowOptions.resizeable = true;
      windowOptions.initshow = true;
      windowOptions.draggable = true;
      windowOptions.closeable = true;
      windowOptions.headerstyle = 'font-family: verdana; background-color: #0066FF;';

      ColdFusion.Window.create(windowID,'Customer Billing Batch','editbillingbatch.cfm?runMode=' + recordAction + '&billingBatchID=' + selectedBillingBatchID , windowOptions);
   }

Do you see the windowID variable in there? Give this a shot. It might not work but what do you have to lost at this point :)
The only weirdness I cannot solve for you is a datefield's calendar picker not openning up in a cfform within a cfwindow. I don't know what I'm doing wrong but if anyone out there can help me - have at it. Before anyone even suggests it - yes I am using cfajaximport with cfinput-datefield on the parent, or calling, page.
Good luck solving your issue - let us know what happens next!
-Andy

# Posted By Andy Sandefer | 3/14/08 12:37 PM

Andy, thanks. I'll try this when I get home tonight and post my findings. However, if you want to see this issue as I see it, this is the direct link: http://www.highestateliving.com/propertylisting.cf...

On the left side, the first link "I Want To Contact The Seller" -- click it the first time and nothing happens, then click it again and the <cfwindow> executes. If I remove the <cfwindow> code I get no error messages and everything runs fine in both IE and FF.

# Posted By Ketan | 3/14/08 2:50 PM

I went to your site and reproduced your issue. I did in fact get an error back from the browser, even from IE7 at that!!!
:(
The error is...
Array length must be assigned a finite positive number.

I didn't dig much further than that but you should turn on the cfdebugger and take a good look at this.
Thanks,
Andy Sandefer

# Posted By Andy Sandefer | 3/14/08 4:25 PM

Hey Andy, thanks for looking at this. I checked in IE6 and FF2, and it points to prototype.js

I did what any sane developer would do, instead of opening up prototype.js, rolling up the sleeves and drinking a pot of coffee to debug...I did a Google search instead.

I came across this: http://www.prototypejs.org/2008/1/25/prototype-1-6... turns out there was a bug in the old version. I dl the latest version ran the page and viola, it works!!

# Posted By Ketan | 3/14/08 7:21 PM

Why doesn't cfwindow work when called from a cfform of format=flash? If I leave format=flash out, it works, but with it, error.

Do you have a solution using something else?

Some details...
I have a cfform format=flash. When the user clicks a button, or checkbox (or anything at this point) I need to have it spawn a popup that contains the results of a query.

So, I have two possible solutions going but I can't figure out how to get query results to display in the popup.

***You can copy and past this exact code into a cfm file and see exactly what I mean.***


<cfsavecontent variable="test">
var msg = ("I'd piss on a spark plug if it would help at this point.");
var alertSettings:Object = {title:'All Projects', message: msg, width:350, x: 60, y: 10, headerHeight: 27};
errorpopup = mx.managers.PopUpManager.createPopUp(this, FormErrorException, true, alertSettings);
errorpopup.centerPopUp(this);
</cfsavecontent>


<cfsavecontent variable="ShowStatsPanel">
mx.controls.Alert.cancelLabel = "Close";
mx.controls.Alert.yesLabel = "Continue";
var myClickHandler = function (evt){
if (evt.detail == mx.controls.Alert.OK){
//alert("File Stats Here","OK");
}
}
var myAlert = mx.controls.Alert.show("replace this text with project data", "Make Selection", mx.controls.Alert.OK | mx.controls.Alert.CANCEL, this, myClickHandler);
myAlert.width = 500;
myAlert.height = 200;
</cfsavecontent>

<cfform action="" format="flash" name="myForm" width="800" height="800" skin="haloorange">
<cfinput type="button" onclick="#test#" name="myButton2" value="Show using option 1">
<cfinput type="button" onclick="#showStatsPanel#" name="myButton1" value="Show using option 2">

</cfform>

So, going with option number 1 above, I just want to have a query be the msg var (instead of the present humorus string). I'd like to at least concatentate the query results into a string if necessary and display it in the popup.

# Posted By David Kramer | 5/8/08 4:45 PM

Why not show us the code you tried to use w/ cfwindow?

# Posted By Raymond Camden | 5/8/08 4:56 PM

Ajax and Flash forms don't play well together. part of it is a z-index issue. whenever I tried mixing the two flash forms z-index was off the chart so it was always on top.

# Posted By Michael White | 5/8/08 8:06 PM

David Kramer

According to the documentation, a CFWINDOW cannot be called from within a form, and I would conclude that would apply to a cfform as well.

Terry

# Posted By Terry Beard | 5/9/08 7:40 AM

terry, can you tell me where you found this? As far as I know, a cfwindow can be used from within forms. It depends on what you mean by 'from within a form'. Remember that the cfwindow tag can be anywhere. By default it is NOT visible. A form button should have no problem using the JS API to open that window.

# Posted By Raymond Camden | 5/9/08 7:48 AM

Ray,

According to CFML reference, they have the following line:

You cannot use this tag in a form or as a child of a cflayout, or cflayoutarea tag.

I believe you are right though, a window can be called via JS from within a form because in doing so the window would exist outside the form. I just think that it cannot be defined within form tags - the compiler would explode and end the universe as we know it.

# Posted By Terry Beard | 5/9/08 8:02 AM

Yep - I'd put the cfwindow tag all by itself.

# Posted By Raymond Camden | 5/9/08 8:19 AM

Think of the page that the cfwindow will render as part of the page that invoked it. For instance, let's say that you have a cfgrid on page1.cfm and you want the user to add and edit records in the table related to page1.cfm's cfgrid. You could use cfwindow and a simple form in page2.cfm to update the record that you've selected in page1.cfm, but you've got to include everything that page2.cfm is going to need in page1.cfm using a cfajaximport tag like so...
<cfajaximport tags="cfwindow, cfform, cfinput-datefield, cftooltip, cftextarea">. Combine this with the cool fact that page2.cfm can call javascript functions on page1.cfm as if it were part of page1.cfm and you start to really see how by using cfajax you can make all of the elements in your application cooperate and work together without much effort.
I know that they're pretty but you're going to have to ditch flash forms. If you want to go that route then you need to head in the direction of FLEX. I was a huge flash form junkie and last fall/winter I broke down, resigned myself to "unlearning" what I had learned and started embracing the cfajax stuff. Result? Way cooler apps and more flexibility when I have to go back and add things in later on down the road. My bottom line is that this is easier than remoting - which is the only way that your flash forms apps can do cool things like cfajax without refreshing the page. It is also easier to style and flat out more standards compliant. This is the future and I seriously doubt that Adobe is going to spend a dime upgrading the FLEX 1.x toolbox that is cf flash forms. I've got full examples of how to do cool stuff if you need help making the transition. I also highly recommend Ben and Ray's first 2 books in the cfwack series for CF8 - I don't have the 3rd one yet but I'll bet it's pretty good too.
Good luck!

# Posted By Andy Sandefer | 5/9/08 8:49 AM

Sure Raymond...it's the code right from adobe.com, and they're using cfform, but not with format=flash...

<html>
<head>
</head>

<body>
<cfform name="myform">
<cfinput type="hidden" name="hiddentext"
value="This is hidden text from the main page">

Click the mouse on the control to show its text in window 1.
<cfinput name="text1"><br />

Click the button to show the input control text in window 2.
<cfinput name="text2">
<cfinput type="button" name="mybutton" value="Show Text"
onclick="javascript:ColdFusion.Window.show('mywindow2')"><br />

Click the Checkbox to change and show its status in window 3
<cfinput name="check1" type="checkbox"><br />

Click the button to open a window containing the page
specified by the input control.
<cfinput name="text3" value="windowsource.cfm">
<cfinput type="button" name="mybutton3" value="Open Window"
onclick="javascript:ColdFusion.Window.show('mywindow4')">
</cfform>


<cfwindow x="0" y="100" width="200" height="150"
name="mywindow" title="My First Window"
closable="false" draggable="false" resizable="false" initshow="true"
source="windowsource.cfm?text={myform:text1@mousedown}" />


<cfwindow x="0" y="250" width="200" height="150"
name="mywindow2" title="My Second Window"
initshow="true" draggable="false" resizable="false"
source="windowsource.cfm?text={myform:text2}" />


<cfwindow x="0" y="400" width="200" height="150"
name="mywindow3" title="My Third Window"
initshow="true" resizable="false"
source="windowsource.cfm?text=<b>Checkbox: </b>{myform:check1.checked@click}" />


<cfwindow x="210" y="100" width="500" height="480" name="mywindow4"
minHeight="400" minWidth="400"
title="My Fourth Window" initshow="false"
source="{myform:text3}?text={myform:hiddentext}" />
</body>
</html>

# Posted By David Kramer | 5/9/08 11:39 AM

David - so what's the issue? The cfwindows they use are all outside of the form. Are you talking about the fact that the binds are used? I can see that maybe being an issue. I'm not sure if you can do binds to Flash Forms.

(As a note - please, please, please stop using Flash Forms. Use Flex 3 instead. :)

# Posted By Raymond Camden | 5/9/08 11:54 AM

Thanks ALL! I took the Adobe Flex 2 courses here in Seattle and intend to use MXML and AS from here until the next killer app development technology comes out. However, I'm in the middle of a project where I was not the person who made the flash forms decision, but alas I'm the guy who has to make it happen. So I'm down to the last three minor features, and what I thought would be easiest feature has now uncovered the z-index issue and quite a few other caveats at the end of the project.

In short, I'm all down with Flex, and never again will I touch a Flash Form, but isn't there a getURL possibility for this "once and never again" issue?

I thought I could make a cfformitem type=html and have the link spawn a completely new window (awful I know), but even the doc for the syntax on that seems obtuse or down right wrong so I'm really frustrated because all prior forums and lists have provided nothing but hundreds of views to my questions a single digit rsponses that are uselessly academic (This one rocks btw - most replies, useful knowledge, etc. so far in my experience)

This would be an excellent day to wrap this convoluted project up and move on knowing better, so while I'd rather not, I would appreciate the "quick and dirty" workaround because at this point (the last day of the project) I can't abandon cfform format=flash.

(What's really sad is that I actually was able to get a query result set into one of the above solutions a month ago, but didn't like it for some reason, abandonded the code (deleted) and decided to get back to it later, and in the last 48 hours I've learned A LOT about dhtml and flash forms being hellish, but I'm not trying to deconstruct and re-invent that universe I'm just trying to spawn a window with content. Seems easy, but I'd rather drink broken glass at the moment.)

THANKS IN ADVANCE FOR ANY SOLUTIONS TO COME.

# Posted By David Kramer | 5/9/08 12:57 PM

David, as far as I know, Flash's (sorry, AS's) getURL supports calling any JS function. So you should be able to use getURL to call the CF window open stuff.

Again - afaik. I haven't tested this myself. ;)

# Posted By Raymond Camden | 5/9/08 1:03 PM

I got a super simple example working:

<cfform name="myform" format="flash" width="300" height="300">
<cfinput name="button" type="button" value="Hit me like you mean it" onclick="getURL('javascript:ColdFusion.Window.show(\'mywindow\')')">
</cfform>

<cfwindow name="mywindow">
This is my rifle. This is my gun. This is for fighting. This is for fun.
</cfwindow>

# Posted By Raymond Camden | 5/9/08 1:07 PM

Ray,

Two things:

1) I cannot believe you used that string in the cfwindow, because my five year old boy saw Stewie sing that on Family Guy and was grabbing his jewels and singing it all weekend. What are the odds? Insanely awesome.

2) Your example helps because I was havn't some trouble with ColdFusion.Window JS and format=flash, so that's cool to see in a nice succinct example, but sadly z-index is now once again the gotcha.

So...I'm going to lower expectations (yikes) and use a method with less "colness factor" and get the feature
the client wants in and working and move on.

"Live and learn...Flex 3"

THANKS TO EVERYONE GUYS!

# Posted By David Kramer | 5/9/08 1:47 PM

David,
Try one for thing before you abandon this - use the wmode attribute on the flash form. Might not make any difference but just a thought and very quick to try.

# Posted By Andy Sandefer | 5/9/08 1:56 PM

Wasn't even aware of the wmode attribute; looks like a possibility from the adobe doc here:

http://kb.adobe.com/selfservice/viewContent.do?ext...

[fingers crossed]

Thanks Andy for not giving up.

# Posted By David Kramer | 5/9/08 2:08 PM

Andy,

The attribute wmode=transparent works for our needs.

You made my day Andy.

Thanks for pointing out that I should RTFM sometimes and not intelligently "unit-tinker."

Have a great weekend!

# Posted By David Kramer | 5/9/08 2:25 PM

That's good news - glad to be of help. Ray was about 10 seconds from removing me from this site for other idiotic comments that I made on a different post! You really saved me. LOL

You have a good weekend too and remember that when the label turns blue it's as cold as the rockies.

Take care!

# Posted By Andy Sandefer | 5/9/08 2:37 PM

What's somewhat interesting is that wmode=transparent didn't respect z-index of cfwindow in Ray's example just a bit above in this thread.

Of course, I'm unit tinkering again, there's probably a way to layer cfwindow, but I'm too happy to read more tech doc at the moment.

# Posted By David Kramer | 5/9/08 2:42 PM

Is there any way to load media content into a cfwindow? When I set my source as mms://wm.lpb.org/ed/ged/GEDC0101.wmv or http://wm.lpb.org/ed/ged/GEDC0101.wmv, I get the error "unable to open connection to URL"

<cfwindow initShow="true" title="Welcome to GED FastTrack" center="true" modal="true" resizable="true" draggable="true" name="GED FastTrack" source="mms://wm.lpb.org/ed/ged/GEDC0101.wmv" height="240" width="360">
</cfwindow>

# Posted By Tammy Crawford | 5/20/08 1:35 PM

You can't use an external URL in an ajax request. The browser blocks it. Also, I am pretty sure it has to be an HTML response. What I would try instead is point to an HTML file on your server that outputs the HTML to embed the WMV.

# Posted By Raymond Camden | 5/20/08 1:41 PM

I'm trying to put a cfchart in a cfwindow. It works in FF but misbehaves in IE7. I took a queue from this example: http://www.coldfusionjedi.com/demos/sharp/window/w... and included the CF_RunActiveConent.js in the main file. This allows the page to load without error but the window body content replaces the whole page. Including AC_OETags.js seems to only slow down the animation in FF and not fix anything in IE. Whats the deal with the history.js included in the example? Also, is it neccesary to create the window onLoad using the registerOnLoad?

here is code:

index.cfm:

<script type="text/javascript" charset='utf-8' src='/CFIDE/scripts/CF_RunActiveContent.js'></script>

<cfajaximport tags="cfwindow">

<a href="javascript:ColdFusion.Window.create('theWindow', 'hasChart','chart.cfm')" >Click here</a>

chart.cfm:

<cfchart>
<cfchartseries type="pie">
<cfchartdata value="25" item="things">
<cfchartdata value="25" item="stuff">
<cfchartdata value="50" item="shenanigans">
</cfchartseries>
</cfchart>

any suggestions would be much appreciated.

# Posted By Howard Ross | 6/3/08 3:46 PM

I have a cfdiv nested in a cfpod. In the cfdiv, there is a form. I need the parent cfpod to reload when I submit the form in the nested cfdiv. Any thoughts?

# Posted By Kevin | 7/20/08 12:59 PM

In general forms should stay inside, but if not, just consider using ColdFusion.Ajax.submitForm()

# Posted By Raymond Camden | 7/20/08 2:06 PM

Let me explain my situation. I have a "control panel" that allows a cutomer to edit or delete a product in their store. The products are listed in the cfpod. When "edit" is clicked for one of the products, it submits to itself and displays the nested cfdiv above the list of products with a form containing the product information to be edited. When "save" is clicked in the cfdiv form, it makes the edit, and displays the cfdiv form with the modified data. If ColdFusion.Ajax.submitForm() can do that, please tell me how. I tried ColdFusion.Ajax.submitForm('productsform') in the submit button using onclick, but that didn't work.

The problem I'm having is the data in the product list in the parent cfpod below is not updated when the form in the cfdiv is submitted, until I refresh the whole page. And, if, before I refresh the page, edit is clicked on any the product in the list, I get the cfdiv form with blank fields. If I could somehow "refresh" the parent cfpod when the cfdiv form is submitted, I believe that would solve the problem.

# Posted By Kevin | 7/20/08 2:47 PM

Sheesh...the last 2 sentences in the first paragraph should have been at the end of the second paragraph. Sure wish this thing would let a person correct their mistakes.

Sorry.

# Posted By Kevin | 7/20/08 2:50 PM

Kevin, I'd read the docs on the function more. It explains how you would use it to send form data.

# Posted By Raymond Camden | 7/20/08 3:50 PM

You can now destroy a window via ColdFusion.Window.destroy(windowName[, destroyElement]) where windowName = window name, and destroyElement is boolean value specifying whether the HTML element associated witht he window should also be destroyed.

Hurray for 8.01

# Posted By Steve | 7/23/08 2:23 PM

I was just wondering if there was a way to have the ajax window manitain it's location even when the parent browser window is resized? For example, If the ajax window is set to center and then the main browser is dragged to a smaller or larger size the ajax window stays in the initial center location before the main browser window is resized. (So in other words, the ajax window does not maintain its center if the browser window is moved) I have seen this work on a website that auto centers as you move the main browser window but wondered if there is a way to set that function using the cfwindow. Any help would be appreciated.

# Posted By Kris Boldt | 8/18/08 3:57 PM

In theory you listen for the window's size changing event (I'm sure there is one - check the docs for the DOM) and then you would change the x/y of the cfwindow object.

# Posted By Raymond Camden | 8/18/08 4:01 PM

I created a cfwindow with a WMV embedded video. If the user closes the window, the video keeps playing (you can still her the sound). Is there a way to kill the video when someone closes the window?

# Posted By Kurt | 9/18/08 4:59 PM

Try using ColdFusion.Window.destroy. It was added in 801.

# Posted By Raymond Camden | 9/18/08 7:58 PM

Thanks Raymond. I was able to add a destroy button to the window. That works good and the video stops when the button is clicked. I'm not sure how to make the x button destroy the window as well. Is there a way to do that?

# Posted By Kurt | 9/19/08 10:16 AM

@Kurt,
Try ColdFusion.Window.onHide

Read the docs brother, read the docs.

# Posted By Andy Sandefer | 9/19/08 11:20 AM

Hoping someone could help me out. I have a parent page which contains <cflayout> tabs. The parent page needs to be refreshed periodically to perform a certain functionality. I am keeping track of which tab is selected before a parent page submit by adding url param. Everything works fine, but when page reloads I get a js error "can't move focus to a control because it's invisible, not enabled or a type that doesn't accept the focus". All I am doing is adding "selected=true" to a cflayoutarea tag of the active tab. Any ideas?! Any help is greatly appreciated

# Posted By Anna | 10/10/08 5:03 PM

@Anna
Read
http://www.coldfusionjedi.com/index.cfm/2008/10/3/...

# Posted By Andy Sandefer | 10/10/08 5:35 PM

Andy, thank u for a quick reply. I might of mislead you by my description of the problem. The tabs need to be reloaded when a value in a select box on a parent page changes. And the js error I am experiencing comes up if I am setting a 'selected=true' to a tab other the the default first tab. Looking at the source of the page, i've noticed that it sets selected tab value twice, first time on initializeTabLayout, where it sets it to the default first tab, and the second time it sets it to the actual tab I am making active. Think this is where the problem is. Any way to overwrite the initializeTabLayout method, so it wouldn't set it to the first tab by default? Thanks again

# Posted By Anna | 10/10/08 7:48 PM

You've got me there. Maybe you can share the code? But don't post it here. Post it elsewhere and share the URL?

# Posted By Raymond Camden | 10/11/08 9:02 AM

Ray,

I saw your example for cfwindow. When the source, its surprised me that, even though the code using only the
cfwindow, its loading all the js files. I dont whats the use of this. This will decrease the performance and impact on SEO?

ex:
<script type="text/javascript" src="/CFIDE/scripts/ajax/messages/cfmessage.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/package/cfajax.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/yui/animation/animation-min.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/ext-core.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/package/resizable.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/package/dragdrop/dragdrop.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/package/util.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/build/state/State-min.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/package/widget-core.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/package/dialog/dialogs.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/package/cfwindow.js"></script>
<link rel="stylesheet" type="text/css" href="/CFIDE/scripts/ajax/resources/ext/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/CFIDE/scripts/ajax/resources/cf/cf.css" />

# Posted By Srinivas | 11/18/08 8:27 AM

Unfortunately, there isn't much you can do about that. When you use CF's built in Ajax features, you lose some of the fine grain control you would have if you did it by hand. Convenience in this case gives you a small penalty in download size.

# Posted By Raymond Camden | 11/18/08 9:32 AM

[Add Comment]