October 28th 2008

Modal Delete Confirmation Version Two Using jQuery SimpleModal Plugin Demo

I finally got around to using the SimpleModal delete confirmation that I wrote about quite a while back. One of the first things I noticed was that I could cut down a lot of the html markup by not including the confirmation in each row of the table and instead just setup a single confirmation and call it each time one of the delete icons was clicked.

Live Demo | Download (HTML, CSS, JavaScript)

End Product:

End Product Image

End Product Image

HTML:

jQuery:

The key to making everything work is having a hidden field whose value is set to the primary key/id of the row when the delete icon is clicked. When yes is clicked the confirmation popup closes and the click event of a hidden button is fired which causes the postback and deletes the row. The delete event in the code behind would then look for the hidden field to know which row to delete. I am pretty happy with this confirmation, but am planning to do the same thing with jqModal to see if I like it better.

Update 28OCT08: John pointed out in the comments that the no button quit working on the third click without a postback in IE. I tracked down that I did not need to set the click event of the no button in my own jquery and instead just add the default modalClose class to the button and the plugin will take care of the binding and unbinding. The code above has been updated and should now work correctly in IE, Firefox and Chrome. The download has also been updated.