Thursday, March 23rd, 2006
AJAX Delete Confirmation
Category: Ajax, PHP
, Programming
I have this love hate relationships with Delete Confirmations. On the one hand you have “How the $%# did you accidentally hit delete?� and on the other hand you have “Oh $%#, I accidentally hit delete!�
It’s a necessary evil I guess.
You can do it the usual way, a Javascript confirmation pop up thingy…or….you can use Taconite to make it a little smoother.
It make things easier, he gives the code you’ll need to set it up on your site – both Javascript for the HTML page and the PHP script for the backend. The script replaces the “delete” button with a confirmation “really delete?” button to ensure that clicking the first time wasn’t an accident. I could definitely see using something like this on a flie listing or a database record listing. It would make deleting a row a simple matter of clicking twice versus that annoying Javascript popup (and without having to develop a special “window” in the page for the delete). Nice, Clean and Simple.
Related Content:
A much better solution to delete confirmations is to get rid of them entirely and replace them with ‘undo’ buttons. GMail does this. Unfortunately it’s a fair bit trickier to implement.
This would not work for people, like my mom, who dblclick everything.
I don’t get why Ajax is needed there… Couldn’t we just do the same with client-side Javascript ? There’s no data to be retrieve asynchronously from the server side !
Juste change the button’s label and set a flag meaning it’s the 1st click on this button. Then, on the second click, submit the form (POST or ajaxified POST)
I agree with Seb. It’s retarded to make an extra round-trip just for a delete confirmation. This is ajax for the sake of using ajax – it is not good design.
Or maybe you could have two delete buttons side by side, a confirm delete that is disabled until you click the first. That would get around the whole double click dilemna. Not sure if that’s good either though.
I agree that this is an interesting alternative, but like sup, I think it’s ajax for the sake of ajax and makes the extra trip to the server unnecessary. Personally, the confirm box works fine.
I was considering a special “alert” div that looks like a javascript popup and use that for confirmations..but with “yes” and “no” to make it more intuitive…but no ajax is necessary for that, either.
I personally think it’s a great idea! It’s implemented on our upcoming site (RedLettr), and works beautifully. As the interface designer, I love this method. It’s simple, smart, and inline.
@derek, don’t promote the technique by giving us a site the writer of the blog is developing.. The idea might be nice, but AJAX isn’t needed.
Haha well I was actually curious what it looked like! So I appreciated the example that derek gave but I guess it isn’t a very good real world example other than the blogger’s. I think you could make a Lightbox style confirm box that would be way prettier than a javascript confirm and achieve the same result.
[...] Source: http://ajaxian.com/archives/ajax-delete-confirmation Trackback · [...]
A waste of time, and a pointless use of Ajax.
“nails nails, everywhere i look all i see are nails!”
Another thing about the “double-click� problem is that the button update delay is slower than the average double-click speed.
We need a “Useless Use of AJAX” award in the spirit of the “Useless Use of Cat” award.
I’m going to have to agree with the other comments here – there much better ways of doing this. For one, you can do it just fine without having to install yet another JavaScript library like Taconite.
Ignoring the Ajax part, in theory double-click is capturable distinct from two clicks, right? (There’s a double click event at least) So potentially you could distinguish between two distinct clicks and a double click. In the process perhaps annoying people; but yes, my mom double clicks everything too. And dialog boxes confuse the heck out of her, so I guess she’s just doomed ;)
Personally I really like the concept, although I too fail to see the need for AJAX instead of a simpler client side script. However, I suppose one major advantage of using AJAX is that he’s got it featured on ajaxian.com and got all the publicity that brings!
Interesting Finds
here is my non intrusive implementation of client side confirmation using javascript and Prototype.js:
function confirmation() {
var confirmable = document.getElementsByClassName('confirm');
var nodes = $A(confirmable);
nodes.each(
function(node) {
var url = node.href;
node.href = '#';
node.onclick = function(){
var Answer = confirm("Are you sure?");
if (Answer){
location.href = url;
}
};
}
);
}
then add confirm class to links you wanna confirm. Include the js and add a block to call confirmation().
Enjoy
Ajax aside, it is also purely a matter of conjecture that this solution provides a better user experience than the standard confirm(‘are you sure?’) dialog. I’ll bet you lunch (taco bell) that a real usability test would confirm that confirm() is the better option.
As long as we’re at it, here is a jQuery version of Meshee’s Prototype code:
$().ready( function() {
$('.confirm').click( function() {
return confirm( 'Are you sure?' );
});
});
This code is not only simpler than the Prototype version, but it has a few other advantages as well:
1) It is self-contained; it does not require a function to be called from elsewhere.
2) It works for submit buttons as well as links.
3) It doesn’t put the bogus “#” in the URL when you cancel.
That said, I’m not a big fan of confirmation dialogs either, but it’s always fun to compare code. :-)
Ajaxians, YOU REALLY NEED TO FIX YOUR COMMENT SCRIPT! It displayed an error message with a page full of dirty words when I submitted my previous comment.
uguhio
rtyrtyrt
Boy! thats nice to know….
This Account Has Been Suspended
Please contact the billing/support department as soon as possible.