Dialog returning before selecting answer

Question

I have a dialog box that pops up asking the user a question, this is in a function as below:

function confirmBox2(action) {

    var message = "";

    if (action == "Quit") {

        message = "Are you sure you want to quit without saving?";

    }
    else if (action == "Delete") {

        message = "Confirm you want to Delete?";

    }
    else if (action == "Save") {

        message = "Are you sure you want to Save Changes?";

    }


    $('body').append('<div id="dialog-box" style="display:none;">' + message + '</div>');

    $('#dialog-box').dialog({
        modal: true,
        buttons: {
            Yes: function () {

                $(this).dialog("close");
                $('#dialog-box').remove();

                return true;
                //history.back(-1);

            },
            NO: function () {
                $(this).dialog("close");
                $('#dialog-box').remove();

                return false;

            }
        }
    });
}

You will see that the Yes returns true and the No returns false. I want to be able to do something like

if(confirmBox2("Quit")){

    // do something here
}

The issue I am having is that the code is running asynchronously and not waiting for the dialog answer to be selected, how do I get round this?

Thanks

possible duplicate of [jquery ui dialog box need to return value, when user presses button, but not working](http://stackoverflow.com/questions/6049687/jquery-ui-dialog-box-need-to-return-value-when-user-presses-button-but-not-wor) — melpomene, Feb 22 '13 at 10:15
on anchor click event i have called your function and its working at my side...what is wrong..? — Dipesh Parmar, Feb 22 '13 at 10:15
@DipeshParmar It can't be working. He's trying to return the result of an asynchronous event in a synchronous manner. He'd need 2 callback functions (one for each button) in order for it to work. — Reinstate Monica Cellio, Feb 22 '13 at 10:24

score 1 · Accepted Answer · answered Feb 22 '13 at 10:37

I've modified the confirmation function to accept 2 further parameters. One of them is the name of the function to call when you click "yes", and the other is the name of the function to call when you click "no". Your previous version was opening the dialog and then immediately ending the function, as the dialog call is not a blocking or synchronous call, so the function didn't wait till you closed the dialog before returning. That's why you weren't getting a result. With this method you create a function to handle the "yes" click, a function to handle the "no" click and you call them when the corresponding button is clicked.

function confirmBox2(Action, YesCallback, NoCallback) {
    var message = "";
    if (Action == "Quit") {
        message = "Are you sure you want to quit without saving?";
    } else if (Action == "Delete") {
        message = "Confirm you want to Delete?";
    } else if (Action == "Save") {
        message = "Are you sure you want to Save Changes?";
    }

    $('body').append('<div id="dialog-box" style="display:none;">' + message + '</div>');

    $('#dialog-box').dialog({
        modal: true,
        buttons: {
            "Yes" : function () {
                $(this).dialog("close");
                $('#dialog-box').remove();
                YesCallback();
            },
            "No" : function () {
                $(this).dialog("close");
                $('#dialog-box').remove();
                NoCallback();
            }
        }
    });
}

function onDialogYes() {
    // handle the "yes" click here
}

function onDialogNo() {
    // handle the "no" click here
}

confirmBox2("Quit", onDialogYes, onDialogNo);

You could alternatively do it without passing the callback functions as parameters, like this...

function confirmBox2(Action) {
    var message = "";
    if (Action == "Quit") {
        message = "Are you sure you want to quit without saving?";
    } else if (Action == "Delete") {
        message = "Confirm you want to Delete?";
    } else if (Action == "Save") {
        message = "Are you sure you want to Save Changes?";
    }

    $('body').append('<div id="dialog-box" style="display:none;">' + message + '</div>');

    $('#dialog-box').dialog({
        modal: true,
        buttons: {
            "Yes" : function () {
                $(this).dialog("close");
                $('#dialog-box').remove();
                onDialogYes();
            },
            "No" : function () {
                $(this).dialog("close");
                $('#dialog-box').remove();
                onDialogNo();
            }
        }
    });
}

function onDialogYes() {
    // handle the "yes" click here
}

function onDialogNo() {
    // handle the "no" click here
}

confirmBox2("Quit");

You'll probably want to pass Action into the event handlers for the buttons, so that you know what action you're dealing with.

Dialog returning before selecting answer

1 Answers1