Detecte and delete data if user click go back button in the broswer

Question

I am working an application where each time the user open the page atomatically genrate an id for that page using the database. All data is stored with that id when the user click save button (the saving button in a server side ) . But how I can do that, If the user click the go back or close buttons in the brower I want a window appear with some text like "You forget to click save button to save your work , If you leave you will lose your work!". In the same time I want to delete the id if the user did not click save button and leave the page.

Possible duplicate of [How to show the "Are you sure you want to navigate away from this page?" when changes committed?](https://stackoverflow.com/questions/1119289/how-to-show-the-are-you-sure-you-want-to-navigate-away-from-this-page-when-ch) — SᴇM, Dec 08 '17 at 10:06

ArunPratap · Accepted Answer · 2017-12-08T11:09:27.997

0

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

     <script type="text/javascript">
        jQuery(document).ready(function ($) {

            if (window.history && window.history.pushState) {

                window.history.pushState('forward', null, './#forward');

                $(window).on('popstate', function () {
                    alert('hey wait You Clicked Back Button');
                    //your Code here

                });

            }
        });
     </script>

edited Dec 08 '17 at 11:09

answered Dec 08 '17 at 10:18

ArunPratap

4,816
7
25
43

For backward compatibility you can also go through: history.js – ArunPratap Dec 08 '17 at 10:27
Where I should put it ? I tried to put it in the end of the html body and no action! – Omaima Alkharoosi Dec 08 '17 at 10:29
you have to add between – ArunPratap Dec 08 '17 at 10:33
I added it like that still no action! EmptyWeb – Omaima Alkharoosi Dec 08 '17 at 10:40
Thank you for your answer but still doesn't work with me ! – Omaima Alkharoosi Dec 08 '17 at 10:59
TRY to run on different browser because its working in my Internet explorer 11 – ArunPratap Dec 08 '17 at 11:01
where are u clicking for back?? – ArunPratap Dec 08 '17 at 11:01
I was using chrome now i switch to IE . It give me this exeption : 0x800a1391 - JavaScript runtime error: 'jQuery' is undefined – Omaima Alkharoosi Dec 08 '17 at 11:07
check latest answer and copy it and let me know if it wont work you were missing j query class that's why it was not working and if it will work then mark it as an answer – ArunPratap Dec 08 '17 at 11:10
now it shows the window when i click go back in the browser but the data still in the database. – Omaima Alkharoosi Dec 08 '17 at 11:51
you have to fire your submit button where i have written ** your code here** – ArunPratap Dec 08 '17 at 12:01
its Detecting user click go back button in the broswer now you have to use it as you want to use it – ArunPratap Dec 08 '17 at 12:03

Detecte and delete data if user click go back button in the broswer

1 Answers1