Twitter: raymondcamden


Address: Lafayette, LA, USA

ColdFusion 8: AJAX UI Windows

06-20-2007 75,420 views ColdFusion 121 Comments

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:

view plain print about
1<cfwindow>
2This is a window.
3</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:

view plain print about
1<cfwindow initShow="true">
2This is a window.
3</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:

view plain print about
1<cfimage action="info" source="lolcat1.jpg" structName="cat">
2
3<cfwindow initShow="true" title="Welcome to &lt;CFWINDOW&gt;"
4         center="true" modal="true" resizable="true"
5         draggable="false" height="#cat.height#">

6<img src="lolcat1.jpg" align="left">
7This is a cat.
8</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:

view plain print about
1<cfwindow initShow="true" title="Styling Window" center="true" height="400" width="400"
2         bodyStyle="font-family: verdana; color: ##ff0000;"
3         headerStyle="font-family: verdana; background-color: black; color: white">

4<p>
5This is a window with a bit more text in it. It is fairly
6interesting in a not-so-interesting way. A bit like Paris Hilton
7</p>
8</cfwindow>

You can see an example of this here.

You can also supply a source as well:

view plain print about
1<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:

view plain print about
1<cfwindow initShow="false" title="Welcome to &lt;CFWINDOW&gt;"
2         center="true" resizable="true"
3         draggable="false" name="mywin">

4
5Hi, I'm a window.        
6
7<form>
8<input type="button" value="Close Me!" onClick="ColdFusion.Window.hide('mywin')">
9</form>
10
11</cfwindow>
12
13<p>
14<a href="javaScript:ColdFusion.Window.show('mywin')">Show Window</a><br />
15<a href="javaScript:ColdFusion.Window.hide('mywin')">Hide Window</a><br />
16</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:

view plain print about
1<html>
2
3<head>
4<script>
5function showWindow(name) {
6    alert('You just showed ' + name);
7}
8
9function hideWindow(name) {
10    alert('You just hid ' + name);
11}
12
13setup = function() {
14    ColdFusion.Window.onShow('mywin1', showWindow);
15    ColdFusion.Window.onShow('mywin2', showWindow);
16    ColdFusion.Window.onHide('mywin1', hideWindow);
17    ColdFusion.Window.onHide('mywin2', hideWindow);
18}
19</script>
20</head>
21
22<body>
23<cfwindow initShow="false" title="Window 1" name="mywin1">
24Window 1
25</cfwindow>
26
27<cfwindow initShow="true" title="Window 2" name="mywin2">
28Window 2
29</cfwindow>
30
31<p>
32<a href="javaScript:ColdFusion.Window.show('mywin1')">Show Window 1</a><br />
33<a href="javaScript:ColdFusion.Window.hide('mywin1')">Hide Window 1</a><br />
34<a href="javaScript:ColdFusion.Window.show('mywin2')">Show Window 2</a><br />
35<a href="javaScript:ColdFusion.Window.hide('mywin2')">Hide Window 2</a><br />
36</p>
37
38</body>
39</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:

view plain print about
1<script>
2function makeWindow() {
3    
4    var title = document.getElementById("title").value;
5    var width = document.getElementById("width").value;
6    var height = document.getElementById("height").value;
7    var cbCentered = document.getElementById("centered");
8    if(cbCentered.checked) centered = true;
9    else centered = false;
10    
11    var config = new Object();
12    config.width = width;
13    config.height = height;
14    config.centered = centered;
15    ColdFusion.Window.create('main'+Math.random(),title,'cat2.html',config);
16}
17</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.

121 Comments

  • Commented on 06-20-2007 at 8:29 AM
    One other note about UI controls in general and cfwindow. I'm lazy so I'll quote the docs:

    "You can use the special controlNamebody 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."
  • RobW #
    Commented on 06-20-2007 at 10:15 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.
  • Commented on 06-20-2007 at 10:23 AM
    How would it be dangerous? It is no different than a hidden form field. A hidden div. Or anything else.
  • Todd #
    Commented on 06-20-2007 at 11:17 AM
    Hey, it's about time we started using CF nefariously. :P
  • Commented on 06-20-2007 at 12:55 PM
    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.
  • Chris Dary #
    Commented on 06-22-2007 at 1:42 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
  • Commented on 06-22-2007 at 1:50 PM
    Chris, this has been discussed before. Adobe is aware of this. Do not forget that this is a pre-release.
  • Michael White #
    Commented on 08-24-2007 at 2:07 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>
  • Commented on 08-24-2007 at 2:09 PM
    It looks like you can't. :( I guess you would need to use an inline cfwindow instead.
  • Michael White #
    Commented on 08-24-2007 at 3:18 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
  • Michael White #
    Commented on 08-24-2007 at 3:41 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.
  • Michael White #
    Commented on 08-24-2007 at 6:57 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?
  • Michael White #
    Commented on 08-24-2007 at 7:35 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});"
  • brian #
    Commented on 09-21-2007 at 4:03 AM
    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?
  • Commented on 09-21-2007 at 8:11 AM
    WHat if you use the CF/JS API to get the window object? Maybe then you can get the DOM inside.
  • Commented on 09-29-2007 at 2:20 PM
    eheheh, Michael said "four skins"
  • Commented on 09-29-2007 at 5:32 PM
    What are you - four?

    ;)
  • John Farrar #
    Commented on 10-25-2007 at 12:07 AM
    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.
  • Commented on 10-25-2007 at 6:04 AM
    John:

    Are you saying controlName_title.innerHTML doesn't work?
  • John Farrar #
    Commented on 10-25-2007 at 8:07 AM
    It worked for the cfpod but not for the window for some reason.
  • Fred #
    Commented on 10-25-2007 at 8:34 PM
    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.
  • Commented on 10-26-2007 at 7:58 AM
    Fred: If you're using the cfwindow tag just add refreshOnShow="true" (don't you love it when they make it easy on us??).
  • Commented on 10-26-2007 at 7:59 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...
  • Fred #
    Commented on 10-27-2007 at 7:23 AM
    Yes that was it. I missed that property. Thanks.
  • Michael White #
    Commented on 11-02-2007 at 8:48 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
  • Michael White #
    Commented on 11-02-2007 at 8:52 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.
  • Commented on 11-02-2007 at 9:33 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.
  • Michael White #
    Commented on 11-02-2007 at 9:50 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.
  • Terry Beard #
    Commented on 11-06-2007 at 6:49 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.
  • Commented on 11-06-2007 at 7:18 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).
  • Terry Beard #
    Commented on 11-06-2007 at 10:04 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.
  • Terry Beard #
    Commented on 11-06-2007 at 10:09 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)
  • Commented on 11-06-2007 at 10:43 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?
  • Terry Beard #
    Commented on 11-06-2007 at 10:57 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).
  • Terry Beard #
    Commented on 11-06-2007 at 11:03 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.
  • Terry Beard #
    Commented on 11-06-2007 at 11:24 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.
  • Terry Beard #
    Commented on 11-06-2007 at 11:27 AM
    Ok...never mind - its still not working.
  • Commented on 12-14-2007 at 9:53 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>
  • Dustin Snell #
    Commented on 12-15-2007 at 9:25 PM
    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.
  • Andy Sandefer #
    Commented on 01-28-2008 at 12:58 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','FKClientID');
          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);
       }
  • Jeremy Prevost #
    Commented on 02-26-2008 at 3:30 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).
  • Richard Baldwin #
    Commented on 03-10-2008 at 2:02 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!
  • Gabe #
    Commented on 03-10-2008 at 2:07 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?
  • Commented on 03-10-2008 at 3:11 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.
  • Commented on 03-14-2008 at 9:28 AM
    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
  • Commented on 03-14-2008 at 9:45 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.
  • Commented on 03-14-2008 at 10:53 AM
    Thanks Ray. Can I e-mail you the link to the issue?
  • Commented on 03-14-2008 at 11:02 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.
  • Andy Sandefer #
    Commented on 03-14-2008 at 12:37 PM
    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
  • Commented on 03-14-2008 at 2:50 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.
  • Andy Sandefer #
    Commented on 03-14-2008 at 4:25 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
  • Commented on 03-14-2008 at 7:21 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!!
  • David Kramer #
    Commented on 05-08-2008 at 4:45 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.

    <!--- possible solution #1 --->
    <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>

    <!--- possible solution #2 --->
    <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.
  • Commented on 05-08-2008 at 4:56 PM
    Why not show us the code you tried to use w/ cfwindow?
  • Michael White #
    Commented on 05-08-2008 at 8:06 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.
  • Commented on 05-09-2008 at 7:40 AM
    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
  • Commented on 05-09-2008 at 7:48 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.
  • Commented on 05-09-2008 at 8:02 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.
  • Commented on 05-09-2008 at 8:19 AM
    Yep - I'd put the cfwindow tag all by itself.
  • Andy Sandefer #
    Commented on 05-09-2008 at 8:49 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!
  • David Kramer #
    Commented on 05-09-2008 at 11:39 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>

    <!--- This window shows initially and cannot be closed, dragged, or resized.
    The value of the text URL parameter, and therefore, the contents of the
    text displayed in the window changes each time the user clicks the
    mouse over the text1 control. --->
    <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}" />

    <!--- This window shows initially and cannot be dragged, or resized, but can
    be closed.
    The text URL parameter represents the text2 input control value. --->
    <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}" />

    <!--- This window shows initially and cannot be resized, but can be dragged
    or closed.
    The value of the text URL parameter, and therefore, Boolean value
    displayed in the window changes each time the user clicks the mouse
    in the check1 control to change the check box status.
    The bind expression binds to the check box checked attribute;
    it specifies a click event because Internet Explorer does not
    generate a change event when the user clicks the box.--->
    <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}" />

    <!--- This window does not display initially.
    The Open Window button control opens it.
    It can be closed, dragged, and resized.
    The value text URL parameter represents the value of a hidden text
    field. --->
    <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>
  • Commented on 05-09-2008 at 11:54 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. :)
  • David Kramer #
    Commented on 05-09-2008 at 12:57 PM
    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.
  • Commented on 05-09-2008 at 1:03 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. ;)
  • Commented on 05-09-2008 at 1:07 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>
  • David Kramer #
    Commented on 05-09-2008 at 1:47 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!
  • Andy Sandefer #
    Commented on 05-09-2008 at 1:56 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.
  • David Kramer #
    Commented on 05-09-2008 at 2:08 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.
  • David Kramer #
    Commented on 05-09-2008 at 2:25 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!
  • Andy Sandefer #
    Commented on 05-09-2008 at 2:37 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!
  • David Kramer #
    Commented on 05-09-2008 at 2:42 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.
  • Commented on 05-20-2008 at 1:35 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>
  • Commented on 05-20-2008 at 1:41 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.
  • Howard Ross #
    Commented on 06-03-2008 at 3:46 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 CFRunActiveConent.js in the main file. This allows the page to load without error but the window body content replaces the whole page. Including ACOETags.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.
  • Kevin #
    Commented on 07-20-2008 at 12:59 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?
  • Commented on 07-20-2008 at 2:06 PM
    In general forms should stay inside, but if not, just consider using ColdFusion.Ajax.submitForm()
  • Kevin #
    Commented on 07-20-2008 at 2:47 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.
  • Kevin #
    Commented on 07-20-2008 at 2:50 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.
  • Commented on 07-20-2008 at 3:50 PM
    Kevin, I'd read the docs on the function more. It explains how you would use it to send form data.
  • Steve #
    Commented on 07-23-2008 at 2:23 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
  • Kris Boldt #
    Commented on 08-18-2008 at 3:57 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.
  • Commented on 08-18-2008 at 4:01 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.
  • Kurt #
    Commented on 09-18-2008 at 4:59 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?
  • Commented on 09-18-2008 at 7:58 PM
    Try using ColdFusion.Window.destroy. It was added in 801.
  • Kurt #
    Commented on 09-19-2008 at 10:16 AM
    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?
  • Commented on 09-19-2008 at 11:20 AM
    @Kurt,
    Try ColdFusion.Window.onHide

    Read the docs brother, read the docs.
  • Anna #
    Commented on 10-10-2008 at 5:03 PM
    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
  • Commented on 10-10-2008 at 5:35 PM
    @Anna
    Read
    http://www.coldfusionjedi.com/index.cfm/2008/10/3/...
  • Anna #
    Commented on 10-10-2008 at 7:48 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
  • Commented on 10-11-2008 at 9:02 AM
    You've got me there. Maybe you can share the code? But don't post it here. Post it elsewhere and share the URL?
  • Srinivas #
    Commented on 11-18-2008 at 8:27 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" />
  • Commented on 11-18-2008 at 9:32 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.
  • Miked #
    Commented on 01-12-2009 at 10:10 AM
    I am having a problem trying to set focus on a field that is in a ,cfform in a cflayoutarea. everything works great with the cflayoutarea, except I can't set the focus on a field.

    I have tried using a javascript code with the onload feature of the body tag. does not work.

    I have tried the onload feature of the cfform tag and it does not work.

    any ideas?
  • Commented on 01-12-2009 at 10:14 AM
    Try ajaxOnLoad. It's a CFML function that handles the JS for you.
  • Miked #
    Commented on 01-13-2009 at 2:18 PM
    That worked. Thanks Ray
  • Commented on 01-28-2009 at 4:39 PM
    I'm seeing strange behavior in IE7 (it works fine in FF3) when an autosuggest is used inside a cfwindow. If the cfwindow content is long, and therefore the cfwindow has scrollbars, when you scroll the content the autosuggest floats along down the page rather than scrolling out of view.

    Here's very simple code to reproduce it:

    <!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>Autosuggest in CFWindow Demo</title>
    </head>

    <body>
    <cfwindow name="FormWindow" height="200" width="500" initshow="true">
    <cfform>
    <cfinput name="FirstName" autosuggest="Tim,John,Karen,Connor,Trish" id="FirstName" size="30" maxlength="30" autosuggestminlength="1" maxresultsdisplayed="20" value="" /><br /><br />
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    <div>Junk to make it scroll</div>
    </cfform>
    </cfwindow>
    </body>
    </html>

    Stranger still is that if you remove the DOCTYPE declaration and xmlns from the <html> tag (putting IE7 into quirks mode I suppose), it works correctly. I just wish I knew why. Anyone have any ideas?

    Thanks,
    Russ
  • Commented on 04-10-2009 at 3:34 PM
    Ray I have a question for you about using CSS within a cfwindow. I have an application that spawns a cfwindow which contains a form. User submits form, receives confirmation message, user closes cfwindow. Simple stuff, except it wouldn't work in IE7...surprise surprise. It works in Safari, FF, etc. It took some doing, but by removing elements one by one I figured out it was the CSS class I was attaching to the confirmation message. This class is specified in the stylesheet we are using for the rest of the application. As soon as I removed the class, the cfwindow works as expected in IE7. My guess is that I have to use the CF stylesheet that controls the cfwindow rather than my own, but I haven't been able to find any confirmation on this. Is that the case?

    As a bonus I'd ideally like to have the cfwindow close once the user submits the form inside. While I see the ColdFusion.Window.create() and show() and hide(), I do not see a destroy() or a way to even trigger hide() on form.submit. Am I missing something? Thanks.
  • Commented on 04-10-2009 at 3:36 PM
    Kenneth - destroy was added to CF801. Make sure you are running 801 with the latest hot fixes too. Some Ajax-related items were fixed.
  • Commented on 04-10-2009 at 3:42 PM
    @Kenneth

    Your parent page (the one that invokes the cfwindow) needs to have a function that hides the window. It should also have a function that destroys the window - like so...

       function closeTimeEdit() {
          ColdFusion.Window.onHide(windowID, killTimeEdit);
          ColdFusion.Window.hide(windowID);
       }

       function killTimeEdit() {
          ColdFusion.Window.destroy(windowID, true);
          submitSelectorForm();
       }

    Now here's what you do. In the page that lives inside the cfwindow - put a button who's onClick action calls your close function - in my case above it would be called closeTimeEdit().

    If you're doing an ajax submit form post then specify a callback handler for the submit call and within the callback function call your closing function (which in turn will call your window destruction function).

    So to recap...
    Window closing function and Window killing functions live on the parent page that will invoke the cfwindow. You call them in your callback or from a button to close and kill the cfwindow after you've successfully saved the record (like as in the callback handler for a ColdFusion.Ajax.submitForm) or from a button (as in this is my Cancel button).

    Good luck,
    Andy Sandefer
  • Alain #
    Commented on 04-13-2009 at 4:50 PM
    Hello, and thanks for everything.

    ... but I am stuck: I need to call a cfwindow from a Flash cfform, using a cfinput button, like:

    <cfinput type="button" name="newstudentbtn" value="New Student" onClick="javascript:ColdFusion.Window.show('mywindow')">

    But that doesn't work! The flash form does not load.

    The only think that does work is:

    <cfformitem type="html">
    <A HREF="javascript:ColdFusion.Window.show('mywindow')"> New Student </A>
    </cfformitem>

    but that doesn't look great cause I want a flash button for the user to click on, not a text hyperlink...

    Suggestions appreciated and warmly welcomed!

    Alain
  • Commented on 04-13-2009 at 5:46 PM
    @Alain
    Flash forms and CFAjax do not mix. If you need to stick with flash then start learning Flex, otherwise change your cfforms into html format and redo the markup.

    All of that being said - why not use <cfinput type="button" onClick="myJavaScriptFunctionThatOpensWindow">?

    Just curious, but seriously though - mixing the cf flash forms and ajax is a dead end.
  • Alain #
    Commented on 04-15-2009 at 2:28 AM
    Thanks. I appreciate the advice.

    So I have now put a tabnavigator (with invisible tabs) instead, and it moves to a new tab - instead of opening a cfwindow - when required.

    Clearly much more consistent if I stick to Flashforms, which I would like to do for the time being.

    Thanks again. With greetings from Switzerland!

    Alain
  • andrew #
    Commented on 07-14-2009 at 4:35 PM
    I have a situation and need some help. I'm Trying to use a cfwindow that is linked to an <a> tag. the anchor shows the window. In this window is a form that asks for 2 e-mails and a message to refer a friend to the current page. However I can't for the life of me get this to work. I use a normal HTML form in the source for the window. Currently I'm trying to use javascript for validation. just a button with an onclic=validate(this.form) attribute. when the validation fails I don't want the window to close or submit the form, but it does every time! can anyone help???
  • Commented on 07-14-2009 at 4:36 PM
    If the button is a submit button, don't forget you have to return false to block the form submission if a form validation error exists.
  • Sammy #
    Commented on 08-05-2009 at 11:45 AM
    HI Experts!!
    I am trying to play a video inside cfwindow and it worked fine. But when i tried to close the window the audio is still playing even though the actual cfwindow is hidden.
    I tried surfing with no luck. Any suggestion from you guys would be greatly appreciated!

    Sammy!
  • Commented on 08-05-2009 at 12:20 PM
    @Sammy
    You've got to use the destroy method in an onHide js function when you close the window.
  • Sammy #
    Commented on 08-05-2009 at 1:06 PM
    I tried that as well! But didnt work.....
    Here is the sample.
    <script language="javascript">
    var onhide= function(name) {
    alert("window hidden = " + name);
    coldfusion.window.destroy("mywindow", [true])

    }

    var test=function() {
    ColdFusion.Window.onHide("mywindow", onhide);
    ColdFusion.Window.hide("mywindow");

    }
    </script>
  • Commented on 08-05-2009 at 1:09 PM
    Well you do know that js is case sensitive right?

    so this...

    coldfusion.window.destroy

    is not the same as this...

    ColdFusion.Window.destroy

    check your code and read the docs
  • Commented on 06-01-2010 at 3:31 PM
    I'm trying to open a cfwindow in the main body of a page from within an iframe. I believe I have the pathing wrong, in that window.parent isn't a real DOM path, or that the Coldfusion.Window... pathing doesn't handle frames.

    Any help?

    Main page:

    <cfwindow x="210" y="100" width="200" height="200" name="mywindow4" draggable="False" title="CF Window test" initshow="false" source="test2.cfm" closable="False" modal="True" />


    Within iFrame:

    <cfform name="myform">
    <cfinput type="button" name="mybutton3" value="Open CFwindow" onclick="javascript:ColdFusion.Window.show('mywindow4')">
    </cfform>
  • Commented on 06-03-2010 at 8:25 AM
    Not sure... why not write a function in the parent doc to open the win, and just call that func from the button in the iframe?
  • Morph #
    Commented on 08-10-2010 at 8:08 AM
    Hi Ray,

    my CFWindow doesn´t work :-(.

    I want to get a button in the CFWindow which close my CFWindow, because the variable doesn´t refresh. Maybe the function "ColdFusion.Window.destroy" can help me!??

    Here my code:

    <script language="javascript">
    function closeTimeEdit() {
    ColdFusion.Window.onHide("Window1", killTimeEdit);
    ColdFusion.Window.hide(windowID);
    }

    function killTimeEdit() {
    ColdFusion.Window.destroy("Window1", true);
    submitSelectorForm();
    }

    function test(){
    ColdFusion.Window.hide("Window1");
    }
    </script>

    And the "button":

    <a href="#" onclick="closeTimeEdit()">close</a>

    But unfortunally it doesn´t work.

    Can you help me?
  • Commented on 08-10-2010 at 2:51 PM
    What doesn't work? WHat error do you get?
  • Commented on 08-18-2010 at 2:51 PM
    Hey all,

    I'm creating a cfwindow in the main body of a page, and then calling it from various other parts, hoping to stuff a new url in it by first doing a cf navigate, then a cf show, ala:

    function showShare(stuff) {
    ColdFusion.navigate('/modalDesigns.cfm?' + stuff,'modalDesigns');
    ColdFusion.Window.show('modalDesigns');
    }

    This is how I call it, (from within an iFrame, btw):

    <cfoutput>
    <script>
    parent.showShare('mode=share&sdid=#form.sdid#');
    </script>
    </cfoutput>


    The problem is the URL vars don't show up. The cfwindow appears, but it's as if the cf navigate didn't run. I have a debug display if utl.sdid eq 0 and cgi.querystring = "cfcontainerId=modalDesignsbody&cfnodebug=true&cfnocache=true&cfclientid=B616A227C71442DA429FA275E6D184DD&cfrc=9"

    Is it not possible to re-stuff a cfwindow after it's been created, like a cfdiv, with cf navigate?

    Or is something else up here?
  • Commented on 08-18-2010 at 2:54 PM
    D'oh! As usual, I think of the solution after I post a question.

    I just switched the order of the commands in the function and it worked fine. I guess CF doesn't like re-stuffing a cfwindow that is currently hidden.

    function showShare(stuff) {
    ColdFusion.Window.show('modalDesigns');
    ColdFusion.navigate('/modalDesigns.cfm?' + stuff,'modalDesigns');
    }
  • Commented on 08-19-2010 at 10:07 AM
    Ok, but now we have another problem. These modal windows sometimes appear in front of a Flash movie. For some reason the Flash movie is appearing in FRONT of the gray mask and the darker gray div that floats behind the body of the modal content div (creating a border effect), yet behind the body content div, creating a sandwich-like effect.

    Here's a screen shot of the issue. My notes are in red, with a red circle around a sample modal window.

    http://dev.silverscreendesign.com/media/flashandmodal_weirdness.jpg
  • Commented on 08-19-2010 at 10:28 AM
    Have you tried setting the wmode=transparent or wmode=opaque parameters on your Flash movie?
  • Commented on 08-19-2010 at 10:57 AM
    Yes. wmode only helped the drop-down nav that covers the Flash movie. The nav had a delayed appearance over the flash movie until we set wmode. Didn't help the modals though.

    <object style="z-index:-999;" wmode="opaque" ...
  • Commented on 12-21-2011 at 1:07 PM
    I am looking for more info about Quirks mode and CF (CF9 in this case, but imagine it is an CF8 issue too). This page mentions it so I am hoping someone knows more? I am having a hard time finding much info about this or how to work around it.

    ==============
    Scenario:
    ==============
    We have corporate users using IE7 (still) mostly. Some have IE8 or FF and a few with Chrome/Safari etc. We don't care about IE6 at this point but it might be a while before we can kill IE7 woes.

    I am putting the correct DOCTYPE's in and on basic pages, IE7 recognizes Standards mode correctly and respects the styles (inline or in css files) and other layout rules.

    ==============
    Problem:
    ==============
    Whenever we have a page that uses CFAJAX or other CFWINDOW like stuff where CF9 (and CF8 I imagine does this too) injects the libraries/js into the page, these script blocks precede the the !DOCTYPE declaration throwing the page into quirks mode. Layouts then get rendered with what appears to be the wrong box model and styles seem to fall apart on, in particular, the CFAJAX/CFFORM based input elements (like autosuggest fields or cfajax bound fields)....

    Any ideas?


    Thanks in advance for any help or ideas you might have.
    -w
  • Commented on 12-21-2011 at 1:27 PM
    I may have found my own solution. Works so far anyway. Adding the meta tags for the proper version forces IE7 to load in standards regardless of the loose script blocks CF8/9 injects on CFAJAX endowed pages:
    <meta http-equiv='X-UA-Compatible' content='IE=7' />
    <meta http-equiv='X-UA-Compatible' content='IE=8' />
    <meta http-equiv='X-UA-Compatible' content='IE=9' />
    (You might dynamically use the proper one for the respective browser, of course).
    Thanks!
    -w
  • Commented on 08-30-2012 at 1:47 PM
    Thanked William. I was experiencing the same type of problem with my autosuggest fields.
  • KS #
    Commented on 12-13-2012 at 1:35 PM
    Hi Ray -
    I tend to code about 5 years behind, so your 2007 blog entries are of particular interest to me :)

    Stumbled upon a solution for setting the body/header style when calling a cfwindow via javascript - put the styles in an object.
    var wConfig = new Object();
    wConfig.bodystyle = "border:1px solid grey;";
    wConfig.headerstyle="display:none; ";
    wConfig.center = true;
    wConfig.height = 600;
    wConfig.width = 450;
          ColdFusion.Window.create('winProd','','../pub/win_product.cfm?id=' + varID, wConfig);

    Can't take credit for this -have to thank azadisaryev who posted it on experts-exchange.

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty