How to prevent page refresh before a user has selected a button on a dialog box?

Question

My web app is listening out for a page refresh.

I am attempting this by doing the following:

window.onbeforeunload = dialogBox;

The idea is to display a dialog box in order to prevent the page from refreshing until the user has made a choice from selecting either of the two buttons which determines whether they continue with the refresh or cancel the refresh.

Unfortunately the page displays the dialog box for a brief second and then continues with the refresh. Is there anyway that I can use 'onbeforeunload' to prevent the page from continuing with a refresh and show my dialog box?

Is it impossible to achieve using 'onbeforeunload'?

The code for my dialog box:

function dialogBox()
{
    $("#dialog").html("");
    $("#dialog").append("There appears to be some unsaved changes");
    $( function() {
        $( "#dialog" ).dialog({
            modal: true,
            buttons: {
                Cancel: function() {
                    $(this).dialog( "close" );

                },

                "Save": function() {

                },
            },
        })
    });
}

Thank you all for your time.

Edit: I don't want to prevent a user from refreshing. Rather than display the generic pop-up box that appears when using onbeforeunload, I want to display a custom dialog box by calling a function which generates that. I am somewhat able to display that for a split second, and not permanently until someone has made a selection. That selection should then either continue with the refresh or half it entirely by selecting 'Cancel'.

If it helps, I am using Google Chrome as my web browser of choice.

Possibly related: [Prevent any form of page refresh using jQuery/Javascript](http://stackoverflow.com/questions/3527041/prevent-any-form-of-page-refresh-using-jquery-javascript). Seems like it is not possible to implement a custom dialog box before page reloading.. — Amos Wong, Mar 28 '17 at 14:09
Thanks for your response Amos. I'll reiterate my question so I'm clearer. — user1156596, Mar 28 '17 at 14:10
https://gist.github.com/unamatasanatarai/c3d91350309fcf167975a118283d1032 — Unamata Sanatarai, Mar 28 '17 at 14:18
it;s not achievable buddy. Internet's top web sites are resorting to default mechanism. See facebook, gmail, or google +. — Ravinder Payal, Mar 30 '17 at 12:01

Osama · Answer 1 · 2017-03-28T16:10:49.100

0

Try to use history.go(-1); before calling your function

edited Mar 28 '17 at 16:10

answered Mar 28 '17 at 14:36

Osama

2,912
1
12
15

Javascript execution is stopped after the unload of windows, so it will not be called. – Ravinder Payal Mar 30 '17 at 11:53

Ravinder Payal · Answer 2 · 2017-03-30T11:57:57.517

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

The page states that

Note: To combat unwanted pop-ups, browsers may not display prompts created in beforeunload event handlers unless the page has been interacted with. For a list of specific browsers, see the Browser compatibility section.

Since 25 May 2011, the HTML5 specification states that calls to window.alert(), window.confirm(), and window.prompt() methods may be ignored during this event. See the HTML5 specification for more details.

From firefox v4.0 and Chrome v51.0 the browsers don't even support custom messages in default prompt, so thinking about a custom designed prompt is just an unachievable kind of feature for this Window.unbeforeunload event.

Direct quotation:-

Notes

When this event returns (or sets the returnValue property to) a value other than null or undefined, the user is prompted to confirm the page unload. In some browsers, the return value of the event is displayed in this dialog. Starting with Firefox 4, Chrome 51, Opera 38 and Safari 9.1, a generic string not under the control of the webpage will be shown instead of the returned string. For example, Firefox displays the string "This page is asking you to confirm that you want to leave - data you have entered may not be saved."

Syntax

window.onbeforeunload = funcRef

funcRef is a reference to a function or a function expression. The function should assign a string value to the returnValue property of the Event object and return the same string. Example

window.onbeforeunload = function(e) {
  var dialogText = 'Dialog text here';
  e.returnValue = dialogText;
  return dialogText;
};

How to prevent page refresh before a user has selected a button on a dialog box?

2 Answers2