A Path Less Taken

I was looking for a useful confirmation dialog using jQuery and I found this link. With help from the post author and from the comments I was able to create my own very slightly modified approach that works pretty well and allows for inline generation of the confirmation message in your HTML. Here is what I did.

First I modified the Javascript code per a suggestion in the comments to the post. The result for me looked something like the code fragment below.

1
2
3
4
5

$(document).ready (function () {
	$('.delete').click (function () {
		return confirm ("Are you sure you want to " + $(this).attr ("title") + "?") ;
	}) ; 
}) ;

This is pretty straight forward if you are familiar with jQuery. What happens is the code block is executed anytime an object in the DOM with a class of delete is clicked. The confirm function uses the partial strings “Are you sure you want to ” and “?” that are universal for all messages. The helpful bit from my perspective is joining these two strings with the title attribute of the object that was clicked. This makes more sense when you look at the anchor tag that completes the process.

1

<a href="http:foo.com/delete/something" title="Delete Bob's Pizza Order" class="delete">3 Cheese Pizzas</a>

This is a mock up of a link to delete Bob’s order for 3 Cheese Pizzas. Bob is often stiffing us on the bill so he deserves it. When this anchor tag is clicked by the user the Javascript code above is called. The browser pops up a confirmation dialog with the message:

“Are you sure you want to Delete Bob’s Pizza Order?”

If the user clicks OK then Bob’s order is toast. If they click Cancel then Bob has a shot. At least those are the options that are presented by Google Chrome. I have not tested, but I think they are pretty consistent across browsers.

That’s all there is to it. This is a very low tech approach to providing a context sensitive confirmation dialog using jQuery. If you are not sure how to install the jQuery Javascript library you should check out their web site at http://jquery.com/. Good luck!