Ajax.ActionLink and confirm dialog

Question

I have some problem with

@Ajax.ActionLink

I want to show confirm dialog, and yes, i know that i can do just:

@Ajax.ActionLink("Do it!", "Delete", new AjaxOptions(){ Confirm = "Are you sure?" });

but I want to have my own MyConfirm dialog
I use alertify .

so my code is:

 @Ajax.ActionLink("Do it!", "Delete", new AjaxOptions(){  OnBegin="return MyConfirm();"})

my JavaScript function:

function MyConfirm() {
        alertify.confirm("Do you really want to do that??", function (e) {
           if (e) return true;
           else return false;
        });    
 }

But if I in my MyConfirm() function just return ' false ' Ajax request stop and my " Delete " action doesn't start (so it works how it should works). but in my example function MyConfirm() show me my MyConfirm dialog but it also immediately retruns true and " Delete " action begins! How to deal with that?

Answer 1

As per: Javascript Alertify with return from confirm

Alertify is a non blocking code and it returns before user makes a response. Use fiddler or firebug to see the timeline of user's choice and ajax request.

function MyConfirm() {
        alertify.confirm("Do you really want to do that??", function (e) {
           if (e) alert('after they pressed confirm, but ajax is already sent');
           else alert('after they pressed confirm, but ajax is already sent');
        });
        // no return here
 }

According to http://yassershaikh.com/how-to-use-onbegin-method-with-ajax-beginform/ returning false should cancel Ajax call. but your function does not return anything at the moment.

So the answer by Nicholas is probably the only correct one.

In response to your comment. Assuming you know how to block execution of js (which is a horrible thing to do! and you should not!) this will do the trick for you:

// this tells us if use made a choice
var userClicked = false;
// this is for user's choice
var userChoice;

function MyConfirm() {
    alertify.confirm("Do you really want to do that??", function (e) {
        // mark that user clicked
        userClicked = true;
        if (e) {
            userChoice = true;
        } else {
            userChoice = false;
        }
    });

    // Put your delay code here 
    // userClicked tells you that user made a choice
    // Remember that setTimout will fail here as it's a fork, not a blocking function
    // you will have to do some crazy while loops that will make unicorns cry

    userClicked = false;
    return userChoice;
}

Answer 2

I haven't used alertify , but from the method signature, I presume that alertify.confirm returns immediately and runs the callback method when the user closes the popup some time later.

This means that your MyConfirm method also returns immediately, and if it does not return false, the ajax call is started.

You can fix this by always returning false from MyConfirm , and only making the ajax call in your alertify.confirm callback function:

function MyConfirm() {
    alertify.confirm("Do you really want to do that??", function (e) {

       // this actually makes the ajax call if required
       if (e) doAjaxCall();
    });    


    return false; 
 }