How to stop unloading the page?

Question

I have a page where user needs to enter some data and click save to validate the changes, but my problem is if the user is trying to close the browser window or click on a different link to navigate to a different page..I need to delete all the entries the user has saved so far.. I am doing it the following way

window.onbeforeunload = function() 
{
 if(confirm('Are you sure you want to navigate'))
  {
    //Invoke `enter code here`server side method
  }
 else
 {
   // return false;
 }
}

Everything works fine if he click on Yes, the problem comes when he click on "No"..Even if he click on No..the page unload method is getting called and it is redirected to a different page..but I want it to stay in the same page in same state...can you please help me in achieving this.

Thanks and appreciate your response....

possible duplicate of [How do I stop a page from unloading (navigating away) in JS?](http://stackoverflow.com/questions/1299452/how-do-i-stop-a-page-from-unloading-navigating-away-in-js) — Chris Farmer, Mar 21 '12 at 18:22
AFAIR, not `confirm` should be called, but a string returned. — kirilloid, Mar 21 '12 at 18:27

gen_Eric · Answer 1 · 2012-03-21T18:52:59.417

7

You cannot stop the user from leaving the page. What you can do is alert a message to them, asking if they want to leave or not.

The window.onbeforeunload event should return a string (and only a string). This string will be printed on the alert box made by the browser.

You cannot use your own alert box, or block the user from leaving (or redirect them).

window.onbeforeunload = function(){
    return 'Are you sure you want to leave?';
};

Or with jQuery

$(window).on('beforeunload', function(){
    return 'Are you sure you want to leave?';
});

When a user leaves the page, you can use the onunload event to make an AJAX call (you may need to use async: false here).

Example:

$(window).unload(function(){
    $.ajax({
        url: '/path/to/page/',
        async: false, // this may be needed to make sure the browser doesn't
                      // unload before this is done
        success: function(){
          // Do something
        }
    });
});

NOTE: Instead of doing this, why don't you just save everything when the user is completed? Instead of saving it and then removing it if the user doesn't finish?

edited Mar 21 '12 at 18:52

answered Mar 21 '12 at 18:30

gen_Eric

223,194
41
299
337

Thanks a bunch for your reply..How to make the AJAX call again..can you please expand on it.. – user788312 Mar 21 '12 at 18:34
+1 i like this solution, but i think his application is in an invalid state. no one can guarantee that the ajax call will remove the data... it is also possible that the user is loosing his internet connection or the browser is killed by the task manager... etc.. – Neysor Mar 21 '12 at 18:42
1

@Neysor: I... I guess, but that's not something you should care about. If the user loses his internet connection, or his power goes out, how is that my issue as a programmer? And, yes, the AJAX call may not remove the data, but would be an issue outside of this question. – gen_Eric Mar 21 '12 at 18:45
1

@Rocket as an developer i have to be sure that my data is every time in a valid state. So if my user losses the internet connection it has to care me, if it does make my data invalid. :) I think we as advanced programmers should always say something if someone does anything "bad" and so it is not outside of this question. Because your solution fits his direct question, but not for his needs to have valid data every time :) – Neysor Mar 21 '12 at 18:50
1

@Neysor: Ah, I understand what you're saying and I do agree. I added a new suggestion to my answer. – gen_Eric Mar 21 '12 at 18:51
@Rocket...thanks a lot for the reply..I will try and let you know – user788312 Mar 21 '12 at 19:11

Neysor · Answer 2 · 2012-03-21T18:53:35.340

First of all: you can't! It's impossible. onbeforeunload only accepts a string as return value and will then close if the user wants that.

But then think about what happens if the computer is being without energy and shuts down? Or the browser will closed by the Task Manager? Or even more "realistic": The internet connection get lost! => Then you got invalid data states too!

You are trying to solve a false problem! Your problem isn't this function, your problem is the state of your formular!

Why do you need some kind of function? Do you saving the data before he clicks on save? Then don't! Or make sure to have another query which detects unfinished data in your database and delete it after a timeout!

score 0 · Answer 3 · edited May 23 '14 at 14:16

0

You can use something like this, just call the following function on your page

function noBack() {
    window.onbeforeunload = function(){window.history.forward()}
}

this disables Back button if window.history is clean, otherwise it works only first time.

edited May 23 '14 at 14:16

iandotkelly

9,024
8
48
67

answered May 23 '14 at 13:45

Anton Kotliarenko

45
4

score 0 · Answer 4 · answered Mar 21 '12 at 18:30

0

onbeforeunload only accepts a string as return value. That string will be displayed by the browser with the option to stay on the page or leave it. But that's ll you can do.

answered Mar 21 '12 at 18:30

Steve

8,609
6
40
54

How to stop unloading the page?

4 Answers4