Develop Reference

Actually prevent this page from creating dialogs

I'm trying to prevent any additional dialogs without needing the additional dialog box to be checked. I'm implementing an autosave feature that is called right before the user closes or refreshes the page, so the "changes you made may not be saved" pop-up is unnecessary. I looked at beforeunload and had no luck.
window.onbeforeunload = null;
$(window).on('unload', function (e) {
$page.model.save(true, function (success) {});
});

Maybe try, instead of just calling
window.onbeforeunload = null;
Instead use:
$(window).on('beforeunload', function () {
window.onbeforeunload = null;
});

Trigger event when user clicks the browsers back button

Is it possible with jquery to trigger a function when the user clicks the browsers back button.
I have a lightbox/widget that when open fills the window when it is open. There is a close button etc but this would be good if this closed if a user hit the back button by mistake.
I have this so far but the function doesnt seem to run at all
$(window).on("navigate", function (event, data) {
event.preventDefault();
console.log('BACK PRESSED');
var direction = data.state.direction;
if (direction === 'back') {
if(widgets.full_active){
$('.close', widgets.active_widget).click();
event.preventDefault();
console.log('CLOSE THIS');
}
}
if (direction === 'forward') {
// do something else
}
});
By not running this line at the start of the function event.preventDefault(); should mean the page never changes

Usually, I do this using the native JavaScript API from the browser, like described here: Manipulating the Broser History.
With jQuery, I see people usually using this plugin: History.js, although I have no idea what is it's status.
The event you're looking for is onpopstate.
A popstate event is dispatched to the window every time the active
history entry changes between two history entries for the same
document.

Preventing users from accidentally navigating away from unsaved pages

I got the snippet below from this SO post, and it works when a user tries to reload the page or close the browser etc. but if the user clicks on a link then it lets them naivagate away, and then incorrectly starts displaying the message on the wrong page. I am using pjax for the links.
$(document).ready(function () {
$('textarea').change(function () {
window.onbeforeunload = function () { return "Your changes to the survey have not been saved?" };
});
});

You should use onbeforeunload like this, inconditionally:
<script type="text/javascript">
saved=true; // initially, it is saved (no action has been done)
window.onbeforeunload = confirmExit;
function confirmExit() {
if (!saved) {
return "You did not save, do you want to do it now?";
}
}
</script>
It is not safe to handle this event only when another event is fired. The onchange event of your textarea here probably don't fire before you click on a link so the window won't handle the onbeforeunload at all. The link will work as expected: you will get redirected.
To deal with the saved flag, you could listen to what happens in your textarea, for example, when the user is actually typing something:
$('textarea').keyup(function(){
saved=false;
});
Then, if you save the data in ajax, the save button could set it back to true:
$('#btnSave').click(function(){
// ajax save
saved=true;
});
Otherwise, it will load the next page with the saved flag on.

what about something like the following?
Listening on all <a> links and then, depending on whether the variable needToSave is set to true, showing the message or letting it go.
var needToSave = false; // Set this to true on some change
// listen on all <a ...> clicks
$(document).click("a", function(event){
if (needToSave == true) {
alert("You need to save first");
event.preventDefault();
return;
}
});
UPDATE (as per Roasted's suggestion) this should trigger the unload event every time the link is clicked and perform your existing logic:
// listen on all <a ...> clicks
$(document).click("a", function(event){
$(window).trigger("unload");
});
jsFiddle here - http://jsfiddle.net/k2fYM/

Custom beforeunload prompt with javascript

I'm trying to setup an exit survey so that when a user leaves our checkout page they are prompted asking them why they're leaving.
Is this possible?
I've spent some time on Google but it appears as though the only solution is a simple browser-controlled confirm-like prompt. Is this true?
update
The following confirm dialog never appears, the page just changes or exits. How can I prevent the page from changing/exiting until I wait for a user's response. I guess I should ask, how can I resume a user's exit/page change action after using e.preventDefault(); ?
jQuery(window).bind('beforeunload', function() {
return function () {
alert('x');
setTimeout(50000, function () {
confirm('you sure?');
});
}();
});

If you are using jQuery you can just do
$(window).unload( function() {
//statements
});

You can do anything you want in the onunload event of the browser:
body.onunload = function() {
foo();
bar();
}

As suggested by levu, use the onunload event in combination with a custom modal dialog, such as thickbox - http://jquery.com/demo/thickbox/

How to prevent the user to change page with jQuery

I have a page with a form that is submittes via ajaxSubmit() (so, without changing the page).
My goal is that, when the user try to change page (or even to close the browser), i ask him if really want to exit the page without sending the form (exactly as gmail does).
Gmail for example do this with a window.confirm-like popup, but if it is possible, i'll like to handle it with custom messages and options.
jQuery have the unload event:
$(window).unload( function () { alert("Bye now!"); } );
but it permits me just to do something before exit the page; i need to 'block' the page exit, if the user click the relative button.
So, how to handle (and cancel) the page-exit event?

try the following. Demo here
<script type="text/javascript">
function unloadPage(){
return "dont leave me this way";
}
window.onbeforeunload = unloadPage;
</script>

It's possible bind the "onbeforeunload" event with jQuery:
$(window).bind('beforeunload', function(e) {
return "ATTENZIONE!!";
});
It works!!