While reviewing an existing project at work, I notice it has many delete confirmation pages. In my opinion, delete confirmation PAGES should really just retire from the face of the earth. Seriously, why do we need to create a http request & html for the mere purpose of asking

“Are you sure you wish to delete blah?”

Yes, I’m sure | No, go back

Often the URLs for delete confirmation pages are consisted of

some.host/someApplication/deleteConfirmation?toDelete=some+description&id=some+id

Delete confirmation should be an UI client side behavior to prevent the user from accidentally clicking on a delete link/button and forcing a backend change to the data that was not intended.

Preconditions

The delete actions are hyperlinks. There are many examples with delete actions as form submissions. My example expects the delete actions to be links such as delete.php?id=#. I believe this is a more challenging situation than a form submission. I will share my solution. I think ideally it will be nice for the jQuery UI dialog to return a boolean javascript variable but since it currently does not (and I’m not sure it ever will), I’m using window.location to load the delete action link.

View the example of the page without any jQuery

Please have some general knowledge regarding jQuery selectors. I will not go into details how that works.

Assume you have a way of using jQuery selectors to uniquely bind an onclick event to each delete link. For simplicity purpose, in my example, all of my delete links will have the css class deleteConfirmation.

jQuery UI example of a delete confirmation modal window
I will be using links from Google CDN in my example.

Step 1
Create a div with an unique id in your html markup. It doesn’t matter where it exists in your markup, it just need to exist. We will create the jQuery UI dialog off it.

<div id="jQueryDeleteConfirmationModalWindow"></div>

Step 2
When the DOM is loaded, create your jQuery UI dialog and have its autoOpen property set to false. This allows us to reuse this dialog for all delete confirmations.

// create the jQuery modal window and set autoOpen to false
$("#jQueryDeleteConfirmationModalWindow").dialog({
	title: "Delete Confirmation",
	autoOpen: false,	// set this to false so we can manually open it
	dialogClass: "jQueryDeleteConfirmationModalWindow",
	closeOnEscape: false,
	draggable: false,
	width: 460,
	height: 260,
	modal: true,
	buttons: {
			"Yes, I'm sure": function() {
				$( this ).dialog( "close" );
			},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
	resizable: false,
	open: function() {
		// scrollbar fix for IE
		$('body').css('overflow','hidden');
	},
	close: function() {
		// reset overflow
		$('body').css('overflow','auto');
	}
}); // end of dialog

Step 3
Bind the onclick events to the delete action links via the css class deleteConfirmation.

$('a.deleteConfirmation').click(function() {
	var name = $(this).parent().parent().children('td.name').html(); // a.delete -> td -> tr -> td.name
	name = jQuery.trim(name);
	$("#jQueryDeleteConfirmationModalWindow").html('Are you sure you wish to delete ' + name + '?');
	$("#jQueryDeleteConfirmationModalWindow").dialog('open');
	return false;
});

Notice I also made it so my confirmation message will contain an unique description via the inner html property of another table cell of the same table row?

Step 4
If the user clicks on “Yes, I’m sure”, we want to execute the delete action. Therefore, my solution is to create a global variable that contains the value of the hyperlink the user clicked on and then set it to the window.location if the “Yes, I’m sure” is clicked on the modal window.

As the first line inside of the script tag, add

var deleteTheSelectedUrl = '';

In the button “Yes, I’m sure”, after dialog close, add

if('' != jQuery.trim(deleteTheSelectedUrl)) {
	window.location = deleteTheSelectedUrl;
}

In the onclick event binding, add as the first line

deleteTheSelectedUrl = $(this).attr('href');

View the final example

github repo