Mark Mintoff My superpower is common sense


ASP.Net JQuery Confirm Dialog

How does one go about replacing the javascript default functionality of "confirm", which despite being very useful, is terribly out of touch with modern web design?

Achieved, naturally through the use of this simple bit of code:

Over the past few days, I combed the web searching for a nice, clean and simple way to replace the confirm dialog with a stylized version; preferably with JQueryUI. All solutions and plugins which I found seemed to be concentrated towards passing in functions or URLs to be executed upon the user pressing the "Yes" button. This is insufficient. The great advantage attained from "confirm" is that it halts the form from submitting until user input is provided; something which is very very useful in ASP.Net.

What I needed was to emulate the same functionality; putting the form submission on hold, until the user has clicked "Yes" and to do nothing if "No" is pressed.

My first approach was to use a JQueryUI Dialog normally. To my great dismay, I found that the page does not even wait for user input through the use of this dialog. So much for modal.

My second approach was to resort to Pascal-based thinking; an infinite loop waiting for input. To my surprise, the dialog does not even come up when this is done, and the client side is locked under an infinite loop.

My third approach turned out to be made of the right stuff. What if the default functionality was prevented (returning false) while the dialog is presented to the user and then re-executing the click command if "Yes" is pressed? It's so simple and elegant, I'm in love with it.

Here's how it works:

  • Pass the button itself to the function "confirmDialog"
  • The variable "confirmed" is set as "false" by default.
  • First time condition check: confirmed is false, so display the dialog.
  • Return confirmed (false); hence preventing the code from executing.
  • Dialog is up
  • User presses "Yes", confirmed is set to true
  • Re-execute the button's click function
  • Second time condition check: confirmed is true, do not display the dialog.
  • Return confirmed (true); hence allowing the code to execute.

Simple no? Here's what it looks like:

If "No" is pressed, nothing happens. Confirmed is still false, hence no executions will take place. It is only when "Yes" is pressed and the button's click function is re-executed, will the action execution take place. A simple and yet elegant solution. And what's better is that it involves zero plugins.

The following is a more customizable implementation which I would suggest you make use of:

This has the advantage of dynamically creating the dialog div, as well as allowing customization of the title and dialogText. The close event also cleans up, by removing the generated dialog div.

There is one caveat, which ISĀ solvable I assure you; usage within UpdatePanels. For this I would suggest taking a look at Rick Strahl's ClientScriptProxy and writing something along the lines of:

Putting a "confirmed = false;" in the BindControlEvents() function.

I do not wish to go into too much detail about it here, but this is my implementation:

Now all you need to do is literally writing "confirmed = false;" in a function named BindControlEvents(). Personally, I like using JQuery and UpdatePanels in conjunction with each other, so I write a few things in there such as:

You can obviously customize this to suit your merry needs!

Downloadable example:

VN:F [1.9.22_1171]
Rating: 3.9/5 (25 votes cast)