Question

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?

Answer 1

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

Answer 2

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");
});

Answer 3

this works for me

$(window).bind( beforeunload , function() {
      return  Do you really want to leave?  ;
});

Answer 4

jQuery API specifically says not to bind to beforeunload, and instead should bind directly to the window.onbeforeunload, I just ran across a pretty bad memory in part due binding to beforeunload with jQuery.

Answer 5

This works for me:

window.addEventListener("beforeunload", function(event) {
  event.returnValue = "You may have unsaved Data";
});

Answer 6

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>

友情链接