With Jquery of course

Ok, we often have to do delete button and have to do something about if the users click the button, an the delete action should not taken right away… What if the user doesn’t want to click the button but click it anyway (they are users, their actions are illogical but we still have to meddle around the problem). Around the usability stuff, a confirmation dialog is the mostly used, and if you are scared of this concept, you shouldn’t, because it’s so widely used.

This method is unobtrusive, meaning that even without javascript enabled, the delete button will still works, but no confirmation dialog.

First, we will have a link that will link to our delete function, whatever that’ll be

1
<a href="/delete/this/thing" class="delete">Delete</a>

I give it a class so that all delete button with the same class can have the same functionality determined by my JavaScript or just basically the same styling.
And we can go with this:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
    $(function() {
        $('.delete').click(function() {
            var answer = confirm("Delete this item?")
            if (answer){
                return true;
            }
            else{
                return false;
            };
        });
    });
</script>

Very simple. And it will work. Also, you can also try

1
return confirm(”Delete this item?”);

for an easier one-liner.

Better approach and looks nicer would include using a popup box, make use of tooltips, dialog boxes from Jquery UI… there’s an universe to discover