We Keep Coding

How to have beforeunload functionality with hashchange?

This code here works for a page refresh or closing the page. It pops up a dialog asking if you're sure you want to leave without saving.
$(window).on('beforeunload', function(){
return 'Did you save your changes?';
});
Trouble is I have a SPA and I'd like this to show on hashchange as well.
The alert works here but returning a string does nothing. I'm guessing that that dialog is
specific to the beforeunload event.
$(window).on('hashchange', function(){
alert("saved?");
return "this doesn't do anything";
});
How should I work around this?

I think you may have to capture click event on the hashes and cancel it if not confirmed:
$('a[href^="#"]').click(function(){
return confirm('Did you save your changes?')
});
Demo: http://jsfiddle.net/v8GbN/

Submit a form on close tab/window event

I'm wondering if there is a way to submit the contents of a form when the user closes a tab/window. I've looked into the onunload and onbeforeunload events and think maybe this is the road to go down. I've tried
window.onbeforeunload = function(e) {
document.getElementById("my-form").submit();
};
but that doesn't work. Is there a way I can get this to work in the way I am describing?

If you can use JQuery, give this a try:
$(window).bind('beforeunload', function() {
$("#id-of-submit-button").click();
});

Set focus on unloading window at onunload

I have got a confirm dialog at the onunload event. It works well but there is only one problem: the window loses at onunload the focus and passes it automatically to the parent. But since there is still the confirm dialog going on I don't want to lose the focus on this window.
I have already tried to set the focus manually with window.focus() but this isn't working.
At the moment my code for the onunload event looks like this:
window.onunload = sessionConfirmation;
function sessionConfirmation(e) {
window.focus();
confirm('test');
}
Thank you in advance!

Not quite sure what your end-game is, but I'm assuming you want a confirmation dialog to show when the user tries to leave the page. If so, you want to do this instead:
window.onbeforeunload = sessionConfirmation;
function sessionConfirmation(e) {
return "test";
}
Hope that's what you were asking for!

Custom confirm box that has some functionality to it with window close event

I'm presently writing JavaScript, on clicking the close button in the window, I should get a confirm box. In the confirm box, I should display some message and there should be cancel and continue buttons.
On clicking cancel, the window should not be closed, but on pressing continue, the window should be redirected to another jsp.
Can someone please help me with this code? I tried using the custom confirm box, but that seems to return only a string and it cannot be used to redirect to a page.

This is impossible. You cannot redirect the user to another page when they close the window. This is for security reasons.
To display a confirm box when closing the window, you can use the onbeforeunload event. This will ask the user if they wish to leave the page or not. The confirm box is rendered by the browser, all you can customize on is the text.
$(window).bind('beforeunload', function(){
return 'Are you sure you want to leave?';
});
When the user leaves the page, you can use the onunload event, but again, you cannot redirect them (you can make an AJAX call, but you cannot redirect the browser).
$(window).bind('unload', function(){
console.log('bye'); // Some browsers may block this.
// Chrome blocks alerts in this event.
});

check this example it may help you out
function setConfirmUnload(on){
window.onbeforeunload = (on) ? unloadMessage : null;
}
function unloadMessage(){
return "Are you sure you want to leave this page";
}
setConfirmUnload(true) to enable the confirmation or false if you want to allow them to close the screen without a warning (if you have a close button for instance).
You can try also this (link : http://api.jquery.com/unload/)
$(window).unload(function(){
alert("Bye now!");
});

You need to bind a handler to the onBEFOREunload event, as none of the functionality you want will be possible with the onunload event (it is too late).
var myFunction = function () {
return "Are you sure you want to leave the page?";
};
window.onbeforeunload = myFunction;
As far as I know, there is no way to react to the user input as the confirm box is handled by the browser.

Best practice for warning the user they will lose data

I have a site which uses a lot of JavaScript (mainly jQuery) and I need a nice global way to let the user know that they will lose unsaved changes when they navigate away from a particular page.
At the moment I have an onchange event placed on the inputs and wrap my main navigation in a function which will display the warning when clicked.
This feels really clunky and doesn't scale well (navigation which is not part of the main navigation needs to be manually wrapped, which is far from ideal)

I have an onchange event on my inputs and set an isDirty variable to true when they change.
Then I use onbeforeunload event to warn the user about unsaved changes:
var isDirty = false;
window.onbeforeunload = function (evt) {
if (isDirty) {
return 'If you continue your changes will not be saved.';
}
}

You are looking for the onbeforeunload event.
like
$(window).bind('beforeunload', function(){
return "Are you really sure?";
});
native:
window.onbeforeunload = function(){
return "Are you really sure?";
});
That of course is just the "preventing method". You still need some logic to know whether or not there were changes on your site. That could easily be done by using a boolean for instance. Furthermore you should make a quick detection like
if('onbeforeunload' in window){}
I think all major browsers support the event nowadays, but there are still browser which don't know that event. So if the above condition fails, you can still fallback gracefully to another way.

Use on the on unload window event to catch when the page is going to change. Then prompt a lightbox alert to warn the user if navigating away any unsaved data will be lost.