In this article, I will show how provide user confirmation dialogue box
before re-load (or) refresh (or) back to previous page by press back button
a web page with JQuery.
If you are complete new to JQuery, Then refer the JQuery Quick Start
This gives you basic understanding of JQuery.
When a page is exiting or unloading, the “unload” event will be activate.
We can not stop this event by exit a page.
Syntax is,
$(window).bind('unload', function(){});
We can bind “beforeunload” event windows object, since JQuery 1.4 on wards.
Syntax is,
$(window).bind('beforeunload', function(){
return '>>>>> Your custom message go here <<<<<<';
});
As this beforeunload is attached.
When ever user is re-loaded or exit or press back button.
This event will be called and prompt for user confirmation.
Complete source code is Here,
<html>
<head>
<title>How to interrupt exit or unload window events </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<h1>JQuery : User confirmation before exit or re-load or press back button</h1>
<button id="refresh">Click Me to Refresh a Page</button>
<script type="text/javascript">
$('#refresh').click(function() {
location.reload();
});
$(window).bind('beforeunload', function(){
return 'Are you sure to exit or re-load a page';
});
</script>
</body>
</html>
You can Try it your self by clicking the given link,
*** Venkat – Happy leaning ****