Question

I have this code:

$(window).bind('beforeunload', function () {

        $("#dialogsendnotifications").dialog('open');
    });

    $("#dialogsendnotifications").dialog({

        autoOpen: false,
        closeOnEscape: false,
        buttons: {
            "Yes": function () {
                $(this).dialog('close');
            },
            "No": function () {
                $(this).dialog('close');
            }
        }
    });

So basically what it does is when the user tries to navigate away it pops up the yes no dialog. The troub is that the dialog comes up but it navigates away from the page before the user even gets to choose a button.

Can someone please tell me how to get it to wait until the user has selected an answer?

Answer 1

You can’t. The onbeforeunload event is very, very restrictive. All you can do is return a string which the browser will then use in its own dialog. You can’t do anything fancy at all.

Here’s an example: Live copy | source

jQuery(function($) {

  $(window).bind("beforeunload", function(event) {
    return "This is the message you're allowed to provide";
  });

});