jQuery replacement for javascript confirm

Question

Let's say I want to prompt the user before allowing them to save a record. So let's assume I have the following button defined in the markup:

<asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click"></asp:Button>

To force a prompt with normal javascript, I could wire the OnClick event for my save button to be something like this (I could do this in Page_Load):

btnSave.Attributes.Add("onclick",
    "return confirm('are you sure you want to save?');");

The confirm call will block until the user actually presses on of the Yes/No buttons, which is the behavior I want. If the user presses 'Yes', then my btnSave_OnClick method would be called.

For the jquery dialog that is the equivalent, I tried something like this (see below). But the problem is that unlike javascript confirm(), it's going to get all the way through this function (displayYesNoAlert) and then proceed into my btnSave_OnClick method on the C# side. I need a way to make it "block", until the user presses the Yes or No button, and then return true or false so the btnSave_OnClick will be called or not called depending on the user's answer.

Currently, I just gave up and went with javascript's confirm, I just wondered if there was a way to do it.

function displayYesNoAlert(msg, closeFunction) {
    dialogResult = false;

    // create the dialog if it hasn't been instantiated
    if (!$("#dialog-modal").dialog('isOpen') !== true) {

        // add a div to the DOM that will store our message
        $("<div id=\"dialog-modal\" style='text-align: left;' title='Alert!'>").appendTo("body");

        $("#dialog-modal").html(msg).dialog({
            resizable: true,
            modal: true,
            position: [300, 200],
            buttons: {
                'Yes': function () {
                    dialogResult = true;
                    $(this).dialog("close");
                },
                'No': function () {
                    dialogResult = false;
                    $(this).dialog("close");
                }
            },
            close: function () {
                if (closeFunction !== undefined) {
                    closeFunction();
                }
            }
        });
    }
    $("#dialog-modal").html(msg).dialog('open');

}

Answer 1

I use a callback function that is raised when they click a specific button like Yes. You won't be able to block execution in a script, but also have the UI respond to user actions.

Answer 2

This could be as simple as using your current "save" button to fire off the confirm dialog, then inside of the Confirm dialog have the "yes" button fire the "btnSave_Click" event

I think I misunderstood the question at first...this may be some help to you, although I have not tested it. http://tutorialzine.com/2010/12/better-confirm-box-jquery-css3/

Answer 3

If you need only one final Confirm Box before moving to final code like for SAVE, then definitely this would help to call that SAVE() function in a callback function for button click. That's fine.

I do have another problem as follows: I want to use this custom confirm box in a form validation where there may be multiple cases and scenarios for confirmation one after other.

If user said YES to first confirm box, we want to present the second confirm box based on form data conditions.

If user again say YES to this second confirm box, then we may need to present the next confirm box. Here is the problem, that is not yet possible in these cases..