Alert box for cfform
56 comments Posted by: NahuelThis is a simple example where an alert box is displayed to the user before performing a critical operation. It is sometimes necessary to have a confirmation from the user, so we'll use an alert to do it. If the user clicks on "Yes", we continue, otherwise, we cancel.
Here is the code
<cfsavecontent variable="showAlert">
var myClickHandler = function (evt){
if (evt.detail == mx.controls.Alert.OK){
alert("Records deleted","Completed");
}
}
alert("Are you sure you want to remove all records?", "Warning", mx.controls.Alert.OK | mx.controls.Alert.CANCEL, myClickHandler);
</cfsavecontent>
<cfform name="myform" height="200" width="400" format="Flash">
<cfformgroup type="hbox">
<cfinput type="Button" name="myBtn" onClick="#showAlert#" value="Show Alert" />
</cfformgroup>
</cfform>
Note that the function alert() returns true as soon as the alert is triggered. It doesn't wait for the user response. That means we cannot do if(alert("")){ do something } else {cancel} because it will always go to "do something" regardless of what the user responds. That is why we need to make the event handler function that receives the actual response.
View live example
Download source
56 Comments so far
Write yoursvar myObj = {};
do?
Thanks for letting me know.
I removed it now.
http://www.macromedia.com/cfusion/webforums/forum/messageview.cfm?catid=22&threadid=1003238&enterthread=y
I'm at a complete loss when guessing how to total up a cfgrid column. I think if I could find some documentation on the mx.controls, maybe there would be something in there that could help.
This code snippet you wrote tonite will be very helpful in my current project, thanks again for sharing with us.
You can just write submitForm(), instead of creating an alert.
You can do whatever you want.
I believe that you have a scope problem, make sure that you have a reference to your grid inside the function.
Sample code
<cfsavecontent variable="showAlert">
// here we create a local reference to our grid.
var myGrid = myGrid;
var myClickHandler = function (evt)
{
if (evt.detail == mx.controls.Alert.OK)
{
alert("Records deleted","Completed");
myGrid.removeAll()
}
}
alert("Are you sure you want to remove all records?", "Warning",
mx.controls.Alert.OK | mx.controls.Alert.CANCEL, myClickHandler);
</cfsavecontent>
but everytime i want to run it it gives me errors. How do you use this code in a cfc component. i do it like this but doesn't work.
cfc component code
<cfcomponent displayname="Cancel Button">
<cffunction name="CancelBut" output="yes" access="remote">
<cfsavecontent variable="showAlert">
var myClickHandler = function (evt){
if (evt.detail == mx.controls.Alert.OK){
alert("Records deleted","Completed");
}
}
alert("Are you sure you want to remove all records?", "Warning", mx.controls.Alert.OK |
mx.controls.Alert.CANCEL, myClickHandler);
</cfsavecontent>
<cfreturn showAlert>
</cffunction>
</cfcomponent>
and in my form page i do an onclick like this
<cfinput type="button" name="reset" value=" Cancel Trip " onclick="getURL('cancel.cfc?method=CancelBut')">
but my component doesn't execute my actionscript code. what am i doing wrong here do i need to add something so that my actionscript code executes
i tried entering a query before the
alert("records deleted", "completed");
but then when i load my page the records is allready deleted.
i want to actually delete my record when i confirm with the ok button.
The records get deleted because whatever is inside <cfsavecontent> will get executed, and its output saved in a variable that you can use later. What you put inside the cfsavecontent tag should be only actionscript (or cf generated actionscript).
In order to delete the records when you click the button, you must either submit the form and do it the action page or use the custom tag described at http://www.asfusion.com/blog/entry/calling-a-cfc-from-flash-form-part2
Hope that helps
I will go for the custom tag i think.
i found this code on the macromedia forum page but this doesn't work i think i tried it and my alert box comes out but doesn't wait at any input from the user until it goes to my cfc.
in the onclick statement of a button.
onclick="if(alert('Are you sure','WARNING',YES|NO) == YES){getURL('components/cancel.cfc?method=CancelBut')}">
Thanks for the reply and for the help
greets Sven
Yes, the code you show does not work because the return of alert is always true. You need to implement an event handler function like the one we show in the post.
Yes, there are ways to format the alert. I am preparing an extended example, so stay tuned!
submitForm() does not work inside function. Any help?
what am i missing...
greets
<cfselect name="mySelect"...enabled="#mySelectCheck#"...
<cfsavecontent variable="#mySelectCheck#">
if (myRadioButton.selectedData == 'foo'{
return True;
}
else{
return False;
}
this obviously doesnt work, what am I doing wrong?
</cfsavecontent>
{import, new, delete, createChild, loadmovie, duplicateMovieClip, AttachMovie, registerclass, createTextField, __proto__, uiobjectdescriptor, createclassobject, createemptyobject, createchildatdepth, createchildren, createclasschildatdepth, createobject, createchild, webservice, httpservice, remoteobject}
Yes, that is correct. The same goes for tooltips. Not very elegant, but you can go around that by concatenating the string:
alert("del" + "ete");
I tried to use your example but it won't work.
When I use your live example, everything's fine, but using the source code you provide (I also downloaded it) doesn't work.
I use CFMX 7.0.1. Perhaps something got different in this version?
Do you know something about this?
Thanks,
Fritz
Errors, warnings or exceptions were found when compiling /fss/sandboxes/cblue/cfform/alert.cfm. Visit the online Flex documentation or API reference for further information.
1 Error found.
Error H:\fssdev\sandboxes\cblue\cfform\aler.mxml:137
';' expected
I tried incorporating it into a page that I had and was getting the error and thought it must be in my code somewhere. After messing with it for a while I finally just downloaded the code and saved it and ran it by itself. This is the error I'm getting (when viewing alert.cfm in IE).
This is without the updater.
I ran it on another virtual that has the updater installed and it doesn't show anything at all. I added a word ("aargh") in before the code and it flashes at the top of the window, then appears a little way down the page.
Wierd?
Thanks for your help!,
Christina
When the button is simply:
<cfinput type="button" name="btn_addNewAct" enabled="no" value="Save" onclick="addNewAct()" src="images/nav/check.jpg">
When I change it to:
<cfinput type="submit" name="btn_addNewAct" enabled="no" value="Save" onclick="addNewAct()" src="images/nav/check.jpg">
then the built in form validation from cf works...but the addNewAct() function still fires. Do we have access to know if the validation failed or not.
Thanks,
How do I get it to set a form field value when the "OK" button is clicked? Thanks! Kieren
JG4
You need to use a button (not a type "submit") and then trigger the submit manually if they clicked ok. Use _root.submitForm()
Kieren,
First put your controls in scope (suppose myControl is a text input) and then set it.
var myControl = myControl;var myClickHandler = function (evt){
if (evt.detail == mx.controls.Alert.OK){
alert("Records deleted","Completed");
myControl.text = "I am changed!";
}
}
Erik,
That is due to scope issues. Make sure you put your controls into scope. (even if your remoting service is stored in a form variable such as myForm.myService) as in:
var myForm = myForm;var myControl = myControl;
//do the other stuff, show the alert, etc
<cfsavecontent variable="showAlert">
var myFunction = updatedownloaddate();
var myClickHandler = function (evt){
if (evt.detail == mx.controls.Alert.OK){
myFunction;
}
}
alert("If you agree stuff will happen.", "Warning", mx.controls.Alert.OK | mx.controls.Alert.CANCEL, myClickHandler);
</cfsavecontent>
I have tried both:
<p><a href="javascript:history.back();">Return</a></p>
On a button used: onclick="if (history.length > 0){history.back()}"
Both go back to the form as a new page not back to the page with data.
I'm now looking into the alert but it seems to be used in conjunction with "validate". The error checks have queries and will not work with validate. Can someone help me with some (hopefully simple) code Like:
<cfif form.fieldname eq "">do alert message="You must select fieldname
</cfif>
Yeah, the real estate app doesn't confirm with the user when deleting items. You can check the file explorer on the submitRemoveFile() function where you will see how to do it.
eatmorepossum,
Your syntax is mostly correct, but you are not calling the function within the alert, you need to add the parenthesis myFunction(); and remove them from the var declaration var var myFunction = updatedownloaddate;
thomary,
If what you want is to preserve what the user entered, the back button will never work, because the only data that a flash form loads is the data you set by using ## in the fields, or queries, etc. What I would do is not have the action page be different and let them use the back button but rather repopulate the form with the data they entered if the error checking does not go through. You could use onload to show an alert there if you want, but make sure you are not using cfoutput in ActionScript because otherwise your form will recompile each time (use a hidden field for the alert message instead).
You must either call a remoting service that deletes the record or submit the form and handle that in the action page.
Glandry,
I think you are kind of confused... first, you cannot put javascript in a cfscript tag, as it only accepts cf code (in its script form that does not use tags). Second, you cannot use javascript in a cfform format flash because it only understands ActionScript. But to answer your question, no, there is no "prompt" in flash forms.
But I don't know how to add into the function to get the form to submit and get the records deleted.(see code below)
<cfsavecontent variable="showAlert">
var myObj = {};
var myClickHandler = function (evt){
if (evt.detail == mx.controls.Alert.OK){
How to get the form to submit and tell the user that the records is deleted;
}
}
alert("Are you sure you want to remove all records?", "Warning", mx.controls.Alert.OK |
mx.controls.Alert.CANCEL, myClickHandler);
</cfsavecontent>
We used #include in the MXNA reader (before we had cfformitem type="script") to separate the files to make it easier to work with. At that time, using #include didn't have any advantage other than that (I checked using new, etc). I never checked again, as I was not interested in finding more hacks for cfforms that can be easily changed by Adobe in the future. It seems though, that when some of the updaters got applied, this changed, and the code in the included .as files is not checked for "illegal" keywords and "new" works.
So the answer is yes, it can be used as a workaround, but I wouldn't use it, since it might very possibly be limited in the future and you don't want your code to break when a new version of CF gets installed.
I need to use a confirm box and then do a template include or refresh the current page.
Is this possible?
Thanks
Tim
<script language="JavaScript" type="text/javascript">
function setMyAlert()
{
var x = "Yes1234";
window.document.myForm.SetVariable("myField.text", x);
};
</script>
<cfsaveContent variable="getHashjs">
getURL("javascript:setMyAlert()");
alert(myField.text);
</cfsavecontent>
I even tried to set a small delay (below) to help, but it did not work.
<cfsaveContent variable="getHashjs">
for (var x:Number = 0; x < 100; x++)
{
if (x==0){getURL("javascript:setMyAlert()");};
if (x==99) {
alert(myField.text);};
};
</cfsavecontent>
Does anyone have any suggestions?
Thanks,
Patrick
Can someone help?
Thanks
<cfsavecontent variable="showAlert">
var myClickHandler = function (evt){
if (evt.detail == mx.controls.Alert.OK)
{
_root.submitForm();
}
}
alert("Record Updated", "Warning", mx.controls.Alert.OK, myClickHandler);
</cfsavecontent>
Bruce,
You must either call a remoting service that deletes the record or submit the form and handle that in the action page. [/quote]
Bruce was asking how to execute the delete query. I'm having the same problem.
<cfinput type="button" name="deleteJob" value="DELETE" onClick="#showAlert#">I submit the form back to the same page and check to see if FORM.deleteJob is defined..
<code>
<cfif IsDefined("FORM.deleteJob")>
<cfquery.....>
DELETE FROM foo
WHERE ID = #FORM.ID#
</cfquery>
</cfif>
</cold>
Unfortunately, it appears that this handy script doesn't pass FORM.deleteJob from the delete button.
<cfif IsDefined("FORM.deleteJob")><cfquery.....>
DELETE FROM foo
WHERE ID = #FORM.ID#
</cfquery>
</cfif>
I too, however, experienced the problem with passing a FORM.deleteItem value with the _root.submitForm() solution. I came up with a workaround. I'm sure it's not the most elegant solution, but it works for me, and might for others (Jason?):
<!--- HANDLE DELETE REQUESTS --->
<cfsavecontent variable="showDeleteAlert">
var DeleteMe = editform.editid.value;
var myClickHandler = function (evt){
if (evt.detail == mx.controls.Alert.OK){
<cfoutput>_root.getURL('index.cfm?page=#Page#&deleteid=#editquery.id#')</cfoutput>
}
}
alert("Are you sure you want to remove this record?", "Warning", mx.controls.Alert.OK | mx.controls.Alert.CANCEL, myClickHandler);
</cfsavecontent>
Obviously, this solution ONLY works for the scenario Jason described, in which no form values actually have to be passed, but merely the id of the item to be deleted. And it only works if we can send that value in the query string. Perhaps Laura could refresh this post with a more sophisticated/actionscript solution.
Thanks again!
max
<cffunction name="confirmDelete" output="false" returnType="string">
<cfargument name="Arg1" type="string" required="true" hint="Arg1 hint">
<cfargument name="Arg2" type="string" required="true" hint="Arg2 hint">
<cfsavecontent variable="showDeleteAlert">
var DeleteMe = editform.editid.value;
var myClickHandler = function (evt){
if (evt.detail == mx.controls.Alert.OK){
<cfoutput>_root.getURL('index.cfm?page=#arguments.Arg1#&deleteid=#arguments.Arg2#')</cfoutput>
}
}
alert("Are you sure you want to remove this record?", "Warning", mx.controls.Alert.OK | mx.controls.Alert.CANCEL, myClickHandler);
</cfsavecontent>
<cfreturn showDeleteAlert>
</cffunction>
Then, you can call it, like so:
<cfinput type="Button" name="deleteIt" onClick="#confirmDelete(Page,editquery.id)#" value="Delete Record" />This might provide some more flexibility. Who knows?
I've done my best to keep URL variables to a minimum. Typically, I only use them to pull data from the DB. I'm not sure I want to write data to the DB (or delete) even when using <cfqueryparam cfsqltype="foo" value="#bar#"> for protection.
For the Actionscripters... could I use LoadVars to grab a hidden field from my form and send it back to the same page?
var myClickHandler = function (evt)
{
if (evt.detail == mx.controls.Alert.YES)
{
myFormContent = new LoadVars();
myFormContent.myHiddenField = "deleteMe";
myFormContent.send("index.cfm, "" , "post");
}
}
Is that any 'safer' then using the URL query string? TIA!
var myClickHandler = function (evt)
{
if (evt.detail == mx.controls.Alert.YES)
{
var myFormContent:LoadVars = new LoadVars();
myFormContent.field1 = field1.text;
myFormContent.field2 = field2.text;
myFormContent.field3 = field3.text;
myFormContent.send("index.cfm, "post");
}
}
Resulted in:
The following information is meant for the website developer for debugging purposes.Error Occurred While Processing Request
Illegal usage of actionscript org.apache.oro.text.regex.Perl5Pattern@1075e59.
The following actionscript commands are not allowed: "import, new, delete, createChild, loadmovie, duplicateMovieClip, AttachMovie, registerclass, createTextField, __proto__, uiobjectdescriptor, createclassobject, createemptyobject, createchildatdepth, createchildren, createclasschildatdepth, createobject, createchild, webservice, httpservice, remoteobject".