I'm not a big fan of confirmations. I mean, if I wasn't sure I wanted to do some action than I wouldn't have clicked the link, right? But sometimes clients ask us to add such confirmations to potentially dangerous operations, like deletes for example. Here is a super simple example of how to quickly add a confirmation to a range of actions on a page - delete or whatever.
To begin - lets add a class to links that we want confirmations on. For fun we will call them dangerous links.
<p>
<a href="http://www.cnn.com">CNN</a><br/>
<a href="http://www.aetna.com" class="dangerous">Aetnacrap</a><br/>
<a href="http://www.foxnews.com" class="dangerous">Fox News</a><br/>
<a href="http://www.yahoo.com">Yahoo</a>
</p>
Noticed that for the four links, I've only marked two of them as dangerous. (And yes, I'm being political and angry so please forgive me. If the text bothers you, ignore it.)
Now for the code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("a.dangerous").click(function() {
return confirm("Are you sure you want to do this?")
})
})
</script>
As you can see, I simply create a selector to match all anchor tags with a class of dangerous. I bind to the click function and return true or false based on how you answer the confirmation dialog. Notice I kept the message vague. I didn't mention "delete" or any other particular action. I just gave a simple warning.
That's it. Hope this is helpful for others.
Archived Comments
Ahh a nice jQuery way, ive always done this the lazy way:
<a href="user_delete.cfm?user_id=#user_id#" onclick="javascript: return confirm('Are you sure you want to delete this user permanently from the database?');">Delete</a></td>
thx Ray :)
Cool.
I've done it with a simple js function and called it on the onClick-Event. So i was able to set a parameter.
For example: onClick="dangerous('delete this file')" and the function would be:
function dangerous(msg) {
confirm('Are you sure you want to ' + msg +'?');
}
something like this i think.
regards.
I just started using the Impromptu jQuery plugin (http://trentrichardson.com/... to replace the default Javascript confirmation box in my apps. It's pretty simple to implement and customize, and you end up with a nicer-looking dialog box that you can style to match the rest of the app UI.
I almost always add a confirmation step to any hyperlink that leads to a change on the database back-end, especially when such links are bunched together with other clickable items (making the chance of a misdirected click a bit higher).
Isn't there anywhere left that one can go without the constant drumbeat of politics? Is everyone now a pundit? It is becoming very annoying and predictable. With all due respect, please try to resist.
With all due respect, this is my blog. I like to have fun with my samples. Many times I'll mention Paris Hilton, who certainly has no relation to ColdFusion. I do it to liven up the code a bit.
It's these types of functions that make jQuery such a valuable efficiency tool. Thanks for sharing! And, I don't mind the politics. It's your blog and you can do with it as you see fit. It doesn't hurt that you agree with my personal views :-)
@BrianS: Wow, impromptu is nice. Looks a bit slicker than jQuery Dialog.
If you're using relative or absolute paths for your internal links (instead of fully qualified urls) you can target external links with this JQuery Selector:
$('a[href^="http"]')
You would then modify Ray's click function as follows to put out an alert for all external links:
$('a[href^="http"]').click(function() {
return confirm("Are you sure you want to do this?")
}
This way you do NOT have to add unnecessary, non-semantic code.
Wow - incredibly simple. Thanks Ray. I was just coding a form for internal use when your article showed up.
I simply changed the CSS tag 'dangerous' to something more 'me' friendly. Everyones happy.
@Ray: Yeah, sometimes I find using the jQuery UI widgets to be a bit more trouble than they're worth (though I do use the Datepicker).
@Bill Did you change "dangerous" to "mostlyHarmless"? :)
Sorry Brian, I'm not going to take the bait on a Coldfusion blog. This is Ray's place - he get's to pick out the curtains.
@Bill: Eh? I was just making a lame Hitchhiker's joke. It wasn't meant as a comment on what Ray choose to classify as "dangerous" in his code example.
Sorry, didn't run your comment through my obscurity filter. :) Never was much of a hitchhiker fan. Nuff said. Hey, how bout dem Phillies ???!