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:
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:
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:
2
3<cfwindow initShow="true" title="Welcome to <CFWINDOW>"
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:
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:
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:
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:
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:
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.
"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."
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.
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
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>
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
CFIDE\scripts\ajax\ext\resources\images. I found I could change the images to use the other color schemes if I wanted.
How do you use ColdFusion.Window.create() from within a cfform within a cfdiv?
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});"
;)
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.
Are you saying controlName_title.innerHTML doesn't work?
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.
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.
<!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>
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.
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);
}
@Ray: Love the blog, it has been a big help!
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
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
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.
:(
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
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!!
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.
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
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.
<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!
<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>
(As a note - please, please, please stop using Flash Forms. Use Flex 3 instead. :)
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.
Again - afaik. I haven't tested this myself. ;)
<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>
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!
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.
http://kb.adobe.com/selfservice/viewContent.do?ext...
[fingers crossed]
Thanks Andy for not giving up.
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!
You have a good weekend too and remember that when the label turns blue it's as cold as the rockies.
Take care!
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.
<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>
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.
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.
Sorry.
Hurray for 8.01
Try ColdFusion.Window.onHide
Read the docs brother, read the docs.
Read
http://www.coldfusionjedi.com/index.cfm/2008/10/3/...
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" />
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?
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
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.
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
... 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
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.
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
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!
You've got to use the destroy method in an onHide js function when you close the window.
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>
so this...
coldfusion.window.destroy
is not the same as this...
ColdFusion.Window.destroy
check your code and read the docs
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>
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?
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.query_string = "_cf_containerId=modalDesigns_body&_cf_nodebug=true&_cf_nocache=true&_cf_clientid=B616A227C71442DA429FA275E6D184DD&_cf_rc=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?
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');
}
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/flash_and_...
<object style="z-index:-999;" wmode="opaque" ...
==============
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
<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
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.