jQueryUIConfirm

This page contains some typical uses of a modal window confirmation.

The first is the simplest: an asp:Button that triggers the confirmation request.

<rec:jQueryUIConfirm ID="jqTest" runat="server" TargetID="btnTest" Title="Example" 
                     Message="Hey, are you sure?<br />By clicking 'Yes' you will cause the postback of the page." 
                     ButtonCancelText="No" ButtonConfirmText="Yes!" />

You can also add the confirmation request upon asp:LinkButton's and asp:ImageButton's

<rec:jQueryUIConfirm ID="jqConfirmLink" runat="server" TargetID="lnkTest" 
                     Message="Have you clicked on that LinkButton?" 
                     ButtonCancelText="No" ButtonConfirmText="Yes, I did" CloseOnEscape="true" />
<rec:jQueryUIConfirm ID="jqConfirmImage" runat="server" TargetID="btnImageTest" 
                     Message="Have you clicked on that ImageButton?" 
                     ButtonCancelText="No" ButtonConfirmText="Yes, I did" CloseOnEscape="true" />

You can define an image to shown into the window, at the left of the message.

<rec:jQueryUIConfirm ID="jqImage" runat="server" TargetID="btnWithImage" ImageUrl="~/images/alert.png" 
                     Message="Hey, are you sure?<br />By clicking 'Yes' you will cause the postback of the page." 
                     ButtonCancelText="No" ButtonConfirmText="Yes!" Width="450" />

Your message can be html formatted.

<rec:jQueryUIConfirm ID="jqHTML" runat="server" TargetID="btnHTML" 
                     Message="I remember you:<br /><ul><li>First thing</li><li>Second thing</li></ul>" 
                     ButtonCancelText="No" ButtonConfirmText="Yes!" />

Control's properties are bindable, so you can safely use it inside a control binded to a DataSource, like the following asp:ListView

<rec:jQueryUIConfirm ID="jqcDelete" runat="server" TargetID="btnDelete" Title="Confirm delete" 
    Message='<%# String.Format("Are you sure you want to delete {0}?
                     <br /><small>(The element will not be really deleted!)", 
                     Container.DataItem.ToString()) %>' 
                     ButtonCancelText="Not this time" ButtonConfirmText="Destroy!" Width="400" />

Don't worry if your button causes validation, jQueryUIConfirm will popup only after any validador linked to the button returns true

<rec:jQueryUIConfirm ID="jqRequiredNumeric" runat="server" TargetID="btnSubmit" 
                     Message="Hey, are you sure?" ButtonCancelText="No" ButtonConfirmText="Yes!" />

In some cases you may need to execute a js function just after the click on cancel or confirm button, there are two properties availables. I've also blocked the postback on this example.

<rec:jQueryUIConfirm ID="jqAlertAfterClick" runat="server" TargetID="btnAlertAfterClick" BypassPostback="true" 
                     CloseOnConfirm="true" Title="Test for optional functions" Message="This text is intentionally autoreferential." 
                     ButtonConfirmJSOptionalFunction="alert('You have confirmed');" 
                     ButtonCancelJSOptionalFunction="alert('You have canceled');" />

Nearly every property exposed by the dialogs of jQuery.UI is also exposed by jQueryUIConfirm, so you can customize it like you want. And remember that is fully themeable by standard jQuery UI theme.

<rec:jQueryUIConfirm ID="jqPosition" runat="server" TargetID="btnPosition" 
                     Message="I'm positioned here by property" Position="[5,5]" />
<rec:jQueryUIConfirm ID="jqNotModal" runat="server" TargetID="btnNotModal" 
                     Message="I'm not a modal window" Modal="false" />
<rec:jQueryUIConfirm ID="jqResizable" runat="server" TargetID="btnResizable" 
                     Message="I contain a very long text, so I've been setted as resizable... bla bla bla bla bla, bla bla bla bla bla, bla bla bla bla bla, bla bla, blaaaa" 
                     Resizable="true" />
<rec:jQueryUIConfirm ID="jqNotDraggable" runat="server" TargetID="btnNotDraggable" 
                     Message="I'm not draggable" Draggable="false" />
<rec:jQueryUIConfirm ID="jqEscape" runat="server" TargetID="btnEscape" 
                     Message="I can be closed by pressing 'Esc' key" CloseOnEscape="true" />
<rec:jQueryUIConfirm ID="jqEffects" runat="server" TargetID="btnEffects" 
                     Message="This dialog uses some effects on show and hide" Show="drop" Hide="fold" />