Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I have a small problem. I'm attempting to catch the OnUnLoad Event of the Window and ask a confirmation question and if the user decides they want to stay then fine, and if they want to leave the page then they'll lose all unsaved data. Here's the issues...

I'm using a jQuery UI Dialog and when I put the following code on my page, I have the Dialog open, and when I click the back button on the browser, it never pops up the msgbox. It just refreshes the page:

<script type="text/javascript"> 
    $(window).bind('beforeunload', function() { 
            alert('you are an idiot!'); 
</script>
And the solution that I'm using was a post here.  Again, the msgbox will display fine if I do not have the jQuery UI Dialog open.  If I do, then it doesn't display the msgbox and just refreshes the page.
Any ideas?
                Which browser are you using? The onbeforeunload event isn't specified in w3 standards, so some browsers which are standard-strict doesn't support it. The well known example is Opera.
– BalusC
                Dec 11, 2009 at 17:06
                how can I add a qualifier to this? I want this message to only show if the user has made some modifications to the text of the page.
– Nicholas
                Jun 13, 2011 at 21:41
                @Nicholas: this post shows how to turn it on/off by calling a function: stackoverflow.com/questions/1244535/…
– Homer
                May 11, 2012 at 15:34
                FWIW, the HTML5 specification states that browsers don't need to support "alert" in the beforeunload process - maybe in your example only some special cases are supported by the browser and other's aren't. Anyway, what you return in the beforeunload event is a prompt message. The browser takes care of leaving or staying on the page. See developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload and dev.w3.org/html5/spec-LC/history.html#unloading-documents
– chiccodoro
                Oct 26, 2012 at 11:57
The correct way to display the alert is to simply return a string. Don't call the alert() method yourself.
<script type="text/javascript">
    $(window).on('beforeunload', function() {
        if (iWantTo) {
            return 'you are an idiot!';
</script>
See also: https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload
                So if I'm returning a string, how do i tell if they said Ok or Cancel?  or does it matter?  I actually want a confirm('are you an idiot?'); and then capture which result they chose.  You have any clue on where I would start on that?
– clockwiseq
                Dec 11, 2009 at 17:16
                But read my actual issue.  This works fine if the jQuery Dialog is not open.  If it's open, the confirm does not display and the page just refreshes...
– clockwiseq
                Dec 11, 2009 at 17:39
                For security reasons, the browser doesn't allow you to customize the buttons or the result of the dialog box. In regards to how a jQuery dialog is affecting the unload event, posting the rest of your code would be helpful.
– Jordan Ryan Moore
                Dec 11, 2009 at 18:03
                It's also worth noting that FireFascist 3.5+ no longer displays any user supplied text. So if your site returns "Leaving this page will stop the song you're listening to", the user will see, "This site is trying to tell you something be we have suppressed it. Maybe your data isn't saved?".
– Nick
                Apr 24, 2012 at 18:02
You can also make an exception for leaving the page via submitting a particular form:
$(window).bind('beforeunload', function(){
    return "Do you really want to leave now?";
$("#form_id").submit(function(){
    $(window).unbind("beforeunload");
                You should link your reference to this answer, it would give people a place to start digging deeper into the issue.
– Nick Larsen
                Jul 18, 2011 at 19:58
                As far as I can see, jQuery's documentation just says: The beforeunload event is supported cross-browser in jQuery 1.5.1 and 1.6+, but is not supported in IE for jQuery 1.5.2 due to a regression.
– StriplingWarrior
                Oct 13, 2011 at 21:29
                Probably doesn't count for much at this point, but I'm seeing IE 9 go into an infinite loop and run its process space out of memory binding to window's beforeunload in an iframe.  Sorry, I can't provide a repro link (not for lack of trying).
– dtanders
                Mar 26, 2013 at 15:19
window.addEventListener("beforeunload", function(event) {
  event.returnValue = "You may have unsaved Data";
For ASP.NET MVC if you want to make an exception for leaving the page via submitting a particular form:
Set a form id:
@using (Html.BeginForm("Create", "MgtJob", FormMethod.Post, new { id = "createjob" }))
  // Your code
<script type="text/javascript">
  // Without submit form
   $(window).bind('beforeunload', function () {
        if ($('input').val() !== '') {
            return "It looks like you have input you haven't submitted."
    // this will call before submit; and it will unbind beforeunload
    $(function () {
        $("#createjob").submit(function (event) {
            $(window).unbind("beforeunload");
</script>
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.