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/
Related
I want to make an exam page, and not let the user visiting other pages until he submits it.
It seems like onunload and onbeforeunload are for cases where the user explicitly close the page. I was wondering if there is a trigger for the event when the page lose focus.
You can use the mouseleave event, like so:
$(document).on('mouseleave',function(){
console.log('mouse exited');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
which will trigger anytime the mouse leaves the window.
You can use the $(window).blur() event for that.
$(window).blur(function() {
console.log("page left");
});
Or even better the page visibility check which you can find here: https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API
However, even when you show an alert, you won't be able to keep someone on your page. They can just checkbox the alert to not show again. What you could do is to notify them that the test will auto submit if they leave the tab which they probably won't want.
$(window).blur(function() {
if(!confirm("Notice about leaving the page")) {
if(!document.hasFocus()) {
console.log("user left the page");
}
}
});
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();
});
I would like to use some kind of preventDefault function to overwrite what hitting the refresh button on the browser does (or also pressing CTRL/CMD+R).
Is there something that allows me to prevent refreshing the page?
I tried this but it doesn't seem to do anything in Firefox.
window.onunload = function(){
alert("unload event detected!");
}
You can use onbeforeunload to prompt whether they'd like to leave:
window.onbeforeunload = function() {
return "Are you really sure?\nI don't know why anyone would want to leave my beautiful website!";
};
However, you can't override it any more than that.
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!
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.