Alert is not working when user try to refresh browser page using f5,ctrl+5 using jquery script

Question

I have requirement of show alert to the user when user try to referesh tab in browser it should get alert "if you alert this page you will loose data" but I am using jquery for this still it is not working .

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script>
$(window).on('beforeunload', function(){ 
  alert("Don't refresh you will loose your all data?");   
  //or
  confirm("are you sure want to refresh this page !");
});
</script>

try `window.onbeforeunload=function(e){return "";}`, notice returning something in this case is mandatory. See if this is helpful. — Abhishek Kumar, Jul 26 '18 at 05:09
Don't use `alert` it will just alert ,can't prevent from refresh .... Just acknowledging — Jack jdeoel, Jul 26 '18 at 05:13
Yes, always use confirm as it provides two buttons, Ok and Cancel which returns true and false. Refer : https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm — Abhishek Kumar, Jul 26 '18 at 05:14
Possible duplicate of [JavaScript before leaving the page](https://stackoverflow.com/questions/7080269/javascript-before-leaving-the-page) — Louys Patrice Bessette, Jul 26 '18 at 05:19
Possible duplicate of [Execute function before refresh](https://stackoverflow.com/questions/9308336/execute-function-before-refresh) — SᴇM, Jul 26 '18 at 05:21
Possible duplicate of [Is it possible to display a custom message in the beforeunload popup?](https://stackoverflow.com/questions/38879742/is-it-possible-to-display-a-custom-message-in-the-beforeunload-popup) — freedomn-m, Jul 26 '18 at 07:34

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

Try This with return

Note: NOT all browsers support this

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

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Additional Info :

Google Chrome removed support for custom message in ver 51

Opera removed support for custom message in ver 38

Mozilla Firefox removed support for custom message in ver 44.0

Apple Safari removed support for custom message in ver 9.1

Ref : https://stackoverflow.com/a/38880926/6299088

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 26 '18 at 05:15

Dinesh Ghule

3,423
4
19
39

`.bind()`? What year is this? Superceded in *2011*, now deprecated: http://api.jquery.com/bind/ – freedomn-m Jul 26 '18 at 07:33
update: ah you've just *copied* an existing answer word for word. tut tut. You should vote close as a duplicate. – freedomn-m Jul 26 '18 at 07:36

score 1 · Answer 2 · answered Jul 26 '18 at 05:11

1

It will be like this:

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

    return confirm("are you sure want to refresh this page !");
  });

answered Jul 26 '18 at 05:11

Shailesh Kumar Kachhi

149
9

@MSp told you before :) , returning is the key. – Abhishek Kumar Jul 26 '18 at 05:20
@shailesh kumar kachhi will you please tell me why we need return here initially I didn't used return so it was not working – Anonymous Jul 26 '18 at 05:23
@AbhishekKumar yes it is write actually I didn't used that initially thanks for your answer – Anonymous Jul 26 '18 at 05:27

Himanshu Upadhyay · Answer 3 · 2018-07-26T05:35:41.833

0

Try this out:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script>
$(document).mousedown(function(e){ 
    if( e.button == 2 ) { 
        window.location.reload();
        return false; 
    } 
    return true; 
});
$(window).on('keydown', function(e){
    e = e || window.event;
    if(e.keyCode == 116 || (event.key === "r" && event.ctrlKey)){
        alert("Don't refresh you will loose your all data?");
        confirm("are you sure want to refresh this page !");
    }
});
$(window).on('beforeunload', function(){ 
  alert("Don't refresh you will loose your all data?");   
  //or
  confirm("are you sure want to refresh this page !");
});
</script>

edited Jul 26 '18 at 05:35

answered Jul 26 '18 at 05:09

Himanshu Upadhyay

6,558
1
20
33

when press f5 it is wroking but when right click of mouse and in that if you select refresh then not getting alert , same with ctrl+r. – Anonymous Jul 26 '18 at 05:15
Let me check for that. – Himanshu Upadhyay Jul 26 '18 at 05:16
I updated my answer which also works for `Ctrl + r`. Please give it a try. – Himanshu Upadhyay Jul 26 '18 at 05:24
@MSp, I have updated my answer. Now please check it all. It should work for all your requirements. Please comment how it goes. – Himanshu Upadhyay Jul 26 '18 at 05:36

score 0 · Answer 4 · answered Jul 26 '18 at 05:20

0

Bind beforeunload event :

 $(window).bind("beforeunload",function(){ 
            return confirm("Do you want to refresh this page?");
    });

answered Jul 26 '18 at 05:20

Diwa

73
1
7

Alert is not working when user try to refresh browser page using f5,ctrl+5 using jquery script

4 Answers4

Linked