Use modal windows for delete confirmations please

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

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.

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.

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.