Although I have Googled the Earth to a great extent, I could not find a straight forward method in which to use the CFWINDOW as a replacement for the JavaScript confirm-alert box. In this example, the replacement could used as a Custom Tag but was written to explain how to call and execute.
First is the test form we will use to gather and submit data.
<cfdump var="#FORM#">
<form action="<cfoutput>#CGI.SCRIPT_NAME#</cfoutput>" method="post" name="TestForm">
<input name="TestData" type="hidden" />
<input name="TestSubmit" type="submit" onClick="fnAlertBox(this); return false;" />
</form>The CFDUMP will confirm if the data is being passed, the form is submitting to itself and the submit button has been set to stop (or return false) to force the rest of the code to execute. If you leave off this part, the form will automatically submit when the button is depressed.
Next we will need to include some code on the page before the form to handle calling the CFWINDOW and giving the user a choice.
<cfif StructKeyExists(URL, "AlertBox")>
<div class="AlertBox">
Are you sure you want to do that?<br /><br />
<input name="AlertBoxYes" type="button" value="YES" onClick="fnConfirm('<cfoutput>#URL.AlertBox#</cfoutput>');" />
<input name="AlertBoxNo" type="button" value="NO" onClick="ColdFusion.Window.hide('AlertWindow');" />
</div>
<cfabort>
</cfif>In this example I am calling the CFWINDOW and building the CFWINDOW contents with the same file by checking for the existence of a URL variable. The two choices presented will be a YES and a NO. No will simply cancel the box and since we have already issued a return false from the form, the visitor can continue with edits or make a new selection. YES will receive the name of the form field (dynamically through JavaScript so we don't have to hard code a form name).
<cfsavecontent variable="head">
<style type="text/css">
@import "/CFIDE/scripts/ajax/ext/resources/css/xtheme-aero.css";
.AlertBox, .AlertBox INPUT {
font: Verdana, Geneva, sans-serif;
font-size: 16px;
font-weight: normal;
color: #000;}
.AlertBox {
height: 100%;
overflow: hidden;
text-align: center;
background: #96B9E6;}
.AlertBox INPUT {
width: 80px;}
</style>
</cfsavecontent>
<cfhtmlhead text="#head#">As a suggestion, the style statements are interjected to make the CFWINDOW more pleasant.
<script type="text/javascript">
function fnWinCleanUp() {
ColdFusion.Window.destroy("AlertWindow", true);}
function fnAlertBox(obj) {
try {
ColdFusion.Window.destroy("AlertWindow", true);}
catch(e) { }
ColdFusion.Window.create("AlertWindow", "Confirm?", "cfConfirmBox.cfm?AlertBox=" + obj.form.name, {width:250,height:110,modal:true,closable:false,draggable:false,resizable:false,center:true});
ColdFusion.Window.onHide("AlertWindow", fnWinCleanUp);}
function fnConfirm(obj) {
document.forms[obj].submit();}
</script>
<cfajaximport tags="cfwindow, cfdiv">The function that handles the YES button submits the form thanks to the URL variable sent to it from the form submit button.
If you find this post useful please leave a comment and let me know how you used the information.
