September 14th 2008

Delete Confirmation Popup in ASP.NET ListView Item Using ThickBox jQuery Plugin

In my post last week I initially tried using the jQuery ThickBox plugin to popup a confirmation dialog from an ASP.NET ListView item. I had some trouble at the time getting it to work how I wanted so I moved on to using the SimpleModal plugin. This weekend I decided to go back and try the ThickBox plugin again.

Live Demo | Download (HTML, CSS, JavaScript)

End Product:

ListView Image

Confirmation Image

The solution I came up does not require any code in the code behind. I just used some jQuery and the HTML mark up from Matt Berseth’s post where he did much the same thing using ASP.Net 3.5 SP1 Dynamic Data features. One nice thing about this solution is that you could have multiple ListViews on a page with delete buttons and things would work without anymore code.

jQuery:

One thing to keep in mind is that your reference to the ThickBox JavaScript does need to come later than the jQuery above otherwise things won’t work.

HTML:

I am still having one issue with the way the plugin is working. If you click anywhere on the page the dialog will close. If I set the dialog to be truly modal, then I loose the title bar in the dialog which I really don’t want. For now I can live with this. If anyone knows how to fix it please let me know.

Be sure to checkout the demo and download the solution to try it out yourself. Please let me know if you improve upon my solution in anyway.