User confirmation with jQuery on an ASP.NET page

Question

I seem to have run into a dead end and wanted to double-check to ensure I am not overlooking something. In an <asp:ImageButton> I am using the OnClientClick event

(e.g., OnClientClick="return ClientSideChecks('Delete')")

to obtain user confirmation of an action that will result in problems if he/she made a mistake. The JavaScript that is now called returns either true or false based on the user's response on a window.confirm dialog; this works OK. However, I would like the replace the clunky window.confirm dialog with a more appealing and user-friendly jQuery UI dialog. This is where the problem arises because it appears (based on a fair amount of research and testing) that there is no way to do this (other than window.alert) and return a true or false in Javascript or jQuery; I have seen repeatedly that JavaScript is asynchronous, so the processing will not stop and wait for a response from the jQuery UI confirmation dialog. The apparent solution is to attach all the required downstream processing to callback functions attached to the buttons on the dialog, but I am not at liberty now to change basic structure of how the page works; I just need to get a true or false back from a JavaScript function that is called by the OnClientClick event. Is there indeed no way to do this other than with window.alert? Thanks in advance for any assistance.

It sounds to me that you are going to need to have the OnClientClick always return false after displaying the jQuery popup. Once the popup closes you are going to need to invoke another JavaScript routine which will execute the ASP.NET postback for the click client for the related control. — vbguyny, Nov 30 '16 at 21:14
This, may or may not be of help to you: https://ajaxcontroltoolkit.devexpress.com/ModalPopup/ModalPopup.aspx — Jon P, Nov 30 '16 at 21:54

score 1 · Accepted Answer · answered Dec 03 '16 at 19:08

Thanks to help from Jon P, the following represents what I got to work.

.aspx

<asp:ImageButton id="imgButton" runat="server" OnClientClick=" showConfirm('imgButton'); return false;" >
<div id="dialog-confirm" title="Empty the recycle bin?">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

JavaScript

function showConfirm(source) {
    $("#dialog-confirm").dialog({
        resizable: false,
        height: "auto",
        width: 400,
        modal: true,
        buttons: {
            "Delete all items": function () {
                //this performs the postback
                __doPostBack(source, '');
                //close the dialog
                $(this).dialog("close");
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });
}

.aspx.cs (in the postback section of Page_Load())

if (Request.Form["__EVENTTARGET"] == "imgButton")
{
    imgButton_Click(this, new EventArgs());
}

Without embedding $("#dialog-confirm").dialog({...}) within showConfirm(), I could not get the dialog to display.

Also, without passing the literal id of the source control to showConfirm(), the correct value did not get transferred to __EVENTTARGET.

Again, many thanks to Jon P.

Jon P · Answer 2 · 2016-12-02T05:12:01.373

0

Hacking an answer together from this answer and the jquery ui docs, and as such this is untested!

aspx

<asp:ImageButton id="imgButton" runat="server" OnClientClick=" showConfirm(this); return false;" >
<div id="dialog-confirm" title="Empty the recycle bin?">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

javascript

//  holds the source info
var _source;

function showConfirm(source){
    this._source = source;
    $("dialog-confirm").dialog( "open" );
}


$( "#dialog-confirm" ).dialog({
   resizable: false,
   autoOpen: false,
   height: "auto",
   width: 400,
   modal: true,
   buttons: {
     "Delete all items": function() {
      //this performs the postback
       __doPostBack(this._source.name, '');
       //close the dialog
       $( this ).dialog( "close" );
     },
     Cancel: function() {
       $( this ).dialog( "close" );
    }
  }
});

edited Dec 02 '16 at 05:12

answered Nov 30 '16 at 23:30

Jon P

19,442
8
49
72

Thanks for your efforts. I will attempt to adapt this to my code and will report back. – Steve B Dec 01 '16 at 16:41
To get this to work at all, I had to move the second function above into the first function, effectively replacing the .dialog("open") line with the second function. However, while the Cancel button works as desired, the Yes button does nothing, not even closing the dialog. I will look at this again with fresh eyes tomorrow. Thanks again. – Steve B Dec 02 '16 at 03:06
I need to update my previous comment because the first sentence is incorrect. Before moving the second function into the first, the dialog displayed as soon as the page displayed, without the associated image button ever being clicked. Moving the second function into the first prevented this, but left me with the problem that is accurately reported above. – Steve B Dec 02 '16 at 03:13
Try removing the wrapping function that was surrounding the wire up of the dialog as per my latest edit. Also check for console errors and temporarily removing the `__doPostBack` line to make sure the dialog is wired up then work on getting the postback happening. – Jon P Dec 02 '16 at 05:04
Also needed to add `autoOpen: false` to the dialog options. – Jon P Dec 02 '16 at 05:11

User confirmation with jQuery on an ASP.NET page

2 Answers2