Using the jQuery UI Dialog widget for confirmation windows
Using the jQuery UI Dialog widget for confirmation windows
In our web applications, we often have the need to confirm with the user whether or not they want to proceed with an action they attempted to take. For instance, we might have a delete button on our form that responds to a user click by deleting a record in the database. Before we actually do the delete, we want to double-check with the user first. JavaScript has a confirm(msg) function that will display a standard dialog window that you can use to determine whether or not to continue with an action. The standard dialog window looks like the following (in IE):
The standard confirm window is not very flexible. First, you only get two buttons (and no more), Ok and Cancel, and you can't change the text of either button. Second, you can't change the title on the title bar. You also can't change the question mark icon inside of the dialog. If you need something more flexible, you're going to have to create your own modal overlay window and recreate the functionality that confirm() gives you. Fortunately, jQuery UI has a dialog widget that will get you most of the way there:
As you can see, this dialog window definitely doesn't look like the standard confirm. First, I have more than two buttons and with different text. I also have a different title. It can be resized and repositioned. Also, although you can't see it, this dialog window can have the same visual effects (like applying semi-transparent overlays on everything underneath the window) applied to it that can be applied to other html elements by using jQuery. This would not be possible with the standard confirm. I won't bore you with the details of how to set this up. The documentation on the jQuery site sufficiently explains that. What I want to concentrate on is showing you how to make the jQuery dialog widget behave exactly like the standard JavaScript confirm.
When using the standard confirm, all processing stops until the user clicks on either Ok or Cancel in the window. That means that if the button was supposed to post back to the server, the postback won't occur until a selection is made. Usually, we only go ahead with the postback if the Ok button was clicked. This is typically handled by adding something similar to the OnClientClick event handler on our button:
<asp:Button ID="Button1" runat="server" Text="JavaScript" OnClick="Click" OnClientClick="return confirm('Dude, are you sure?');" />
If the user clicked the Ok button, true would be returned by the confirm(msg) function. If the user selected Cancel, false would be returned. Returning false in OnClientClick will effectively cancel the rest of the event processing (i.e., the event handler for the OnClick event won't be triggered).
Now, for the jQuery dialog, this is how I have the button:
<asp:Button ID="Button2" runat="server" Text="jQuery" OnClick="Click" OnClientClick="showjQueryDialog();return false;" />
I call a client-side function showjQueryDialog() which, amazingly enough, handles showing my jQuery dialog (pre-configured in the document ready event handler). After the call to showjQueryDialog(), I go ahead and just return false. The reason why I have to return false here is because, unlike the confirm() function, the browser doesn't stop processing the rest of the client-side script just because the dialog widget is opened. So we have to manually stop it. Now this raises an issue. So if we always return false, how will our event handler for the OnClick event ever be executed? In order for that event handler to execute, we will need to do the postback ourselves. There are a couple of ways to handle this but this is the approach I take:
1. Create a hidden field on the form (called hdnBtnPostback) who's value will be the exact postback function call I need to make in order to emulate the same postback that would occur had the button processing continued. This value can be set in the Page_Load() of the ASP.NET page. But how do we know what the exact postback function call should be? Fortunately for us, that is one of the methods available from the ClientScriptManager object. So the following code will do the trick:
this.hdnBtnPostback.Value = Page.ClientScript.GetPostBackEventReference(Button2, string.Empty);
This is will generate the exact same call to the __doPostBack() JavaScript function that is generated by the button.
2. In the event handler for my dialog's Ok button click, all I have to do then is get the value of this hidden field and pass it to the JavaScript eval() function. This will effectively execute the postback and the event handler for the OnClick event will be processed:
1 function showjQueryDialog() {
2
3 $("#dialog").dialog("open");
4 }
5
6 //document on ready.
7 $(function(){
8 $("#dialog").dialog({
9 autoOpen: false,
10 modal:true,
11 buttons : {
12 "Yes" : function() {
13 $(this).dialog("close");
14 eval($("#<%= hdnBtnPostback.ClientID %>").val());
15 },
16 "No" : function() {
17 $(this).dialog("close");
18 },
19 "Maybe": function() {
20 $(this).dialog("close");
21 //what should we do when "Maybe" is clicked?
22 }
23 }
24 });
25 });
The event handler for the Yes button in the dialog are on lines 12-15. Line 14 is where we actually do the postback manually.
As you can see, it is quite easy to replace the standard confirm dialog and make it function in the same way. All that is needed is a little elbow grease :).
