12

I know there are a lot of questions regarding this but nothing is answering me right. I want to show a confirmation dialog when user leaves the page. If the user press Cancel he will stay on page and if OK the changes that he has made will be rollback-ed by calling a method. I have done like this:

window.onbeforeunload = function () {
  var r = confirm( "Do you want to leave?" );
  if (r == true) {
       //I will call my method
  }
  else {
      return false;
  }
};

The problem is that I am getting the browser default popup: "LeavePage / StayOnPage"

This page is asking you to confirm that you want to leave - data you have entered may not be saved.

This message is shown in Firefox, in Chrome is a little different. I get this popup after I press OK on my first confirmation dialog.

Is there a way not to show this dialog? (the second one, that I did not create). Or if there is any way to control this popup, does anyone know how to do that? Thanks

Elyor
  • 5,396
  • 8
  • 48
  • 76
Noah Martin
  • 1,708
  • 9
  • 35
  • 73
  • possible duplicate of [How can I override the OnBeforeUnload dialog and replace it with my own?](http://stackoverflow.com/questions/276660/how-can-i-override-the-onbeforeunload-dialog-and-replace-it-with-my-own) – Curtis Oct 04 '13 at 10:58
  • 1
    Thanks but please read for one moment my whole question, I have read all the other questions here before posting this – Noah Martin Oct 04 '13 at 11:00
  • I am getting a problem! Can you help me with that? – Noah Martin Oct 04 '13 at 11:01
  • 2
    The answer to that question is the answer to yours. You may not like the outcome, but it's still the only answer. – Stephan Muller Oct 04 '13 at 11:07
  • Previous versions of Firefox was letting to override `window.onbeforeunload`.. – asdf_enel_hak Oct 04 '13 at 11:25

3 Answers3

14

Here's what I've done, modify to fit your needs:

// This default onbeforeunload event
window.onbeforeunload = function(){
    return "Do you want to leave?"
}

// A jQuery event (I think), which is triggered after "onbeforeunload"
$(window).unload(function(){
    //I will call my method
});

Note: it's tested to work in Google Chrome, IE8 and IE10.

Thor Jacobsen
  • 8,621
  • 2
  • 27
  • 26
  • Thanks for answering, but this is not working.. The behavior in this case is the same. Maybe I am doing something wrong. I tried to put an alert within the "$(window).unload(function()" but it is not shown. Any idea? – Noah Martin Oct 04 '13 at 12:47
  • 1
    Well, `$(window).unload` is only called when the user accepts to leave the page. Depending on what browser you're using for testing, it'll behave differently. For instance, Chrome will block alerts in the unload-function. So try with a `console.log` instead, and see if that gives you some output. – Thor Jacobsen Oct 05 '13 at 08:37
3

This is simple. Just use

window.onbeforeunload = function(){
  return '';
};

to prompt when the user reloads, and

window.close = function(){
 return '';
};

to prompt when the user closes the page. But the user have to click on the page once, or do anything on the page for the code to detect. You don't have to put anything the the return'';, because JavaScript interpreter would just ignore it.

Dennis He
  • 31
  • 2
0
 window.onbeforeunload = function() {
       if (data_needs_saving()) {
           return "Do you really want to leave our brilliant application?";
       } else {
          return;
       }
    };
Yogeshwar Gupta
  • 1