?
Solved

Confirmation on window close

Posted on 2010-08-22
6
Medium Priority
?
673 Views
Last Modified: 2012-06-21
Hi!

I have to show a confirmation dialog to user when he tries to close the window.
The user could navigate to others pages, the message should appears only in closing windows (or tab).

I tried this but it's alerts in navigation too:

<script language="javascript" type="text/javascript">
window.onbeforeunload = confirmExit;
function confirmExit()
{
	return " Are you sure you want to exit this page?";
}
</script>

Open in new window


How can I alert the user only when he tries to close the window (or tab)?

Thanks in advance!
0
Comment
Question by:calypsoworld
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 3

Expert Comment

by:grantunwin
ID: 33496492

function showUnloading(evt){
evt.returnValue = "You are leaving.";
if (!confirm('Are you sure?'))
{
evt.preventDefault;
evt.stopPropagation; // this makes sure it does not bubble up
}

}
</script>

<body onbeforeunload="showUnloading(event); >
</body>

Open in new window

0
 
LVL 8

Expert Comment

by:Fareed Ali Khan
ID: 33496624
Hi,

I don't think you can stop the browser closing through JavaScript. Because of its different scenarios e.g. will it confirm from me when i end task the browser instance from task manager?

onBeforeunload event is called even on page refresh or the postback completes.

But you can show the dialog to user about browser is closing or perform some function calls at the time of browser is closing.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 33497371
About the best one could hope for is to rely upon a global var - call it OK - and set it's initial value to TRUE.

In your navigation functions, set OK to FALSE. Then in your "onbeforeunload" function, test OK. If it is false, then you are in charge of navigation, so do not display the alert. If it is TRUE, then the user is in charge, and the alert should be shown.
<script type="text/javascript">

var OK = true;

function showUnloading(e){
    if (OK) {
        e.returnValue = "You are leaving.";
        
        if (!confirm('Are you sure?')) {
            e.preventDefault;
            e.stopPropagation; // this makes sure it does not bubble up
        }
    }
}

window.onbeforeload = showUnloading;
</script>

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 29

Accepted Solution

by:
Badotz earned 2000 total points
ID: 33497376
A slight change:


<script type="text/javascript">

var OK = true;

function showUnloading(e){
    if (OK) {
        e.returnValue = "You are leaving.";
        
        if (!confirm('Are you sure?')) {
            e.preventDefault;
            e.stopPropagation; // this makes sure it does not bubble up
        }
    }
    return false;
}

window.onbeforeload = showUnloading;
</script>

Open in new window

0
 

Author Closing Comment

by:calypsoworld
ID: 33500193
Thank you very much!
0
 
LVL 29

Expert Comment

by:Badotz
ID: 33500228
No worries - glad to help.
0

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question