Alert box for cfform
This 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.
Anthony
var myObj = {};
do?
Nahuel
Thanks for letting me know.
I removed it now.
Felipe
Mike
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.
Nahuel
You can just write submitForm(), instead of creating an alert.
Steve Walker
Brian
Nahuel
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>
Sven Delporte
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
Sven Delporte
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.
Laura
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
Sven Delporte
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
Laura
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.
Steve Walker
Laura
Yes, there are ways to format the alert. I am preparing an extended example, so stay tuned!
Sergey
submitForm() does not work inside function. Any help?
Sergey
brannon
what am i missing...
sven
greets
Ryan Guill
<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>
Rich F
{import, new, delete, createChild, loadmovie, duplicateMovieClip, AttachMovie, registerclass, createTextField, __proto__, uiobjectdescriptor, createclassobject, createemptyobject, createchildatdepth, createchildren, createclasschildatdepth, createobject, createchild, webservice, httpservice, remoteobject}
Laura
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");
Fritz Dimmel
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
Christina
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
Michael White
Oscar Arevalo
Chad
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,
Kieren
How do I get it to set a form field value when the "OK" button is clicked? Thanks! Kieren
Dexter
JG4
Erik
Laura
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
Tony Eckert
eatmorepossum
<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>
thomary
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>
Laura
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).
Bruce
Glandry
Laura
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.
dan
Sam
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>
michael white
Laura
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.
Anang
Paula
I need to use a confirm box and then do a template include or refresh the current page.
Is this possible?
Tim
Thanks
Tim
Patrick
<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
Todd
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>
Jason
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.
Jason
<cfif IsDefined("FORM.deleteJob")><cfquery.....>
DELETE FROM foo
WHERE ID = #FORM.ID#
</cfquery>
</cfif>
Jason
MaxD
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
MaxD
<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?
MaxD
Jason
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!
Jason
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".
Jason