Thursday, March 23rd, 2006

AJAX Delete Confirmation

Category: Ajax, PHP, Programming

If you’ve ever been developing a web application and grown tired of those Javascript popup windows all over the place for deleting items, consider the use of Ajax and a background PHP script to do the work for you. That’s exactly what Joe Vasquez has created in this new blog post from d3eministry.net.

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.

Posted by Chris Cornutt at 8:26 am
24 Comments

+++--
3.5 rating from 149 votes

24 Comments »

Comments feed TrackBack URI

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.

Comment by Simon Willison — March 23, 2006

This would not work for people, like my mom, who dblclick everything.

Comment by S — March 23, 2006

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)

Comment by Seb — March 23, 2006

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.

Comment by sup — March 23, 2006

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.

Comment by Brian — March 23, 2006

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.

Comment by Jon — March 23, 2006

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.

Comment by Derek — March 23, 2006

@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.

Comment by Gilles — March 23, 2006

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.

Comment by Brian — March 23, 2006

[…] Source: http://ajaxian.com/archives/ajax-delete-confirmation Trackback · […]

Pingback by Mehfuz’s Blog — Documenting myself everyday.. » AJAX Delete Confirmation — March 23, 2006

A waste of time, and a pointless use of Ajax.

“nails nails, everywhere i look all i see are nails!”

Comment by Marty — March 23, 2006

Another thing about the “double-click� problem is that the button update delay is slower than the average double-click speed.

Comment by linb — March 23, 2006

We need a “Useless Use of AJAX” award in the spirit of the “Useless Use of Cat” award.

Comment by Martin Bialasinski — March 23, 2006

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.

Comment by ceejayoz — March 23, 2006

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 ;)

Comment by Ian Bicking — March 23, 2006

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!

Comment by Ian McNaught — March 24, 2006

Interesting Finds

Trackback by Jason Haley — March 24, 2006

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

Comment by Meshee — March 24, 2006

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.

Comment by Marty — March 24, 2006

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. :-)

Comment by Michael Geary — March 26, 2006

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.

Comment by Michael Geary — March 26, 2006

uguhio

Comment by utiut` — May 21, 2006

rtyrtyrt

Comment by vvv — June 8, 2006

Boy! thats nice to know….
This Account Has Been Suspended
Please contact the billing/support department as soon as possible.

Comment by null — July 26, 2006

Leave a comment

You must be logged in to post a comment.