Page exit confirmation - javascript

I am having a couple of problems with my rails app. When a user enters data and then attempts to leave the page via any means (except submit), I want it to prompt them to confirm leaving the page. This is the code I have so far and it works to an extent. If the user fills in some data then clicks 'submit' they are still prompted to confirm leaving the page. If they choose to stay on the page, and then click 'submit' again it will work as expected.
var clean;
var submitted = false;
$(function(){
clean = $("form").serialize();
});
window.onbeforeunload = function(){
$("form").submit(function() {
submitted = true;
});
var dirty = $("form").serialize();
if (dirty != clean && !submitted) {
return "You have unsaved data that will be lost if you leave the page.";
}
};
I'd also like the prompt to occur when a user attempts to follow one of the links on the page (not just closing it etc). I'm using jquery-turbolinks but it still doesn't seem to pick those events up.
Any help with either of these problems would be greatly appreciated!

Here's a possible solution:
<script type="text/javascript">
$(document).ready(function() {
var isEdit = false;
$('input').change(function() {
isEdit = true;
});
function checkIsEdit() {
if(isEdit)
return "You have modified some content. Please save this form.";
}
window.onbeforeunload = checkIsEdit;
$(document).submit(function(){
isEdit = false;
});
});
</script>
(Based on http://www.webstuffshare.com/2010/03/code-snippet-jquery-confirm-before-exit/)

Related

Confirm navigation not working

I have seen this used but it is not working for me
var needToConfirm = true;
window.onbeforeunload = confirmExit;
function confirmExit() {
if (needToConfirm)
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
I was able to get it to work in IE and FF with jQuery's:
$(window).bind('beforeunload', function(){
});

How to prevent user from navigating to other pages in javascript silently (without confirmation dialogbox)?

I want to somehow prevent the user from navigating to other pages in javascript (silently without any comfirmation dialog).
I tried to do this with:
window.onbeforeunload = function (e) {
e.preventDefault();
}
OR
window.onbeforeunload = function (e) {
return false;
}
OR
window.onbeforeunload = function (e) {
return;
}
none of the above codes works. Except that the second example, displays an confirmation box.
The Problem is I want to prevent this silently (without any dialogboxes), like nothing has happened.
To display warning text to the user before the close:
window.onbeforeunload = function(e)
{
return 'You are about to close the page. Are you sure you want to do this?';
};
That said, you can't prevent a user from moving away from your site. That would be a security nightmare. Also, the user can always close the browser.

javascript to display "Are you sure you want to navigate from this page" in a consistent manner

I have a requirement to display a warning message ("Are you sure you want to navigate from this page" ) when a user tries navigates off from a page.
I got this working using the: window.beforeunload event.
var warning = true;
$(window).bind('beforeunload', function (event) {
if ((warning)) {
return "You will lose your unsaved changes";
}
});
The issue I'm running into is, I've a couple of links in this page that results in ajax calls- which would not result in the 'window.beforeunload' getting triggered.
Question is: How do I display the message in the same exact manner when we click on these links. I did try the using the "confirm" dialog - it works but the message appears in the dialog window and not in the native browser like it would in the first case.
$(document).ready(function() {
var warning = true;
var showWarning = function (event) {
if ((warning)) {
var message = "You will lose your unsaved changes";
if (event.currentTarget.tagName != "A") {
return message;
}
var conf = confirm(message);
if (!conf) { //If clicked no prevent click
event.preventDefault();
return false;
}
}
};
$(window).bind('beforeunload', showWarning);
$("a.ajax").click(showWarning);
});
​
Just give your Ajax-links the class ajax like this:
Ajax action
Edit: Forgot something, it works now!
I think that it's a kind of problem releated to a warning message that appear when you enter on a https web sites that have releated media or iframe on an http...

jQuery Exit Popup Redirect?

So I've been looking around for hours, testing multiple versions, testing some of my own theories and I just can't seem to get it working.
What I'm trying to do is use alert or confirm (or whatever works) so popup a dialog when a user tries to navigate away from a purchase form. I just want to ask them "Hey, instead of leaving, why not get a free consultation?" and redirect the user to the "Free Consultation" form.
This is what I have so far and I'm just not getting the right results.
$(window).bind('beforeunload', function(){
var pop = confirm('Are you sure you want to leave? Why not get a FREE consultation?');
if (pop) {
window.location.href('http://www.mydomain/free-consultation/');
} else {
// bye bye
}
});
$("form").submit(function() {
$(window).unbind("beforeunload");
});
This is showing confirm dialog to user, want to stay or leave page. Not exactly what you looking for but maybe it will be useful for start.
function setDirtyFlag() {
needToConfirm = true; //Call this function if some changes is made to the web page and requires an alert
// Of-course you could call this is Keypress event of a text box or so...
}
function releaseDirtyFlag() {
needToConfirm = false; //Call this function if dosent requires an alert.
//this could be called when save button is clicked
}
window.onbeforeunload = confirmExit;
function confirmExit() {
if (needToConfirm)
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
Script taken from http://forums.devarticles.com/showpost.php?p=156884&postcount=18
Instead of using the beforeunload and alert(), I decided to check whether or not the users mouse has left the document. See code below:
$(document).bind('mouseleave', function(event) {
// show an unobtrusive modal
});
Not sure whether it will help.
You need to stop the propagation before showing the Confirm / Alert.
Please refer http://jonathonhill.net/2011-03-04/catching-the-javascript-beforeunload-event-the-cross-browser-way/
Look at the last comment.
Try this:
window.onunload = redirurl;
function redirurl() {
alert('Check this Page');
window.location.href('http://www.google.com');
}

JavaScript before leaving the page

I want to make a confirmation before user leaving the page. If he says ok then it would redirect to new page or cancel to leave. I tried to make it with onunload
<script type="text/javascript">
function con() {
var answer = confirm("do you want to check our other products")
if (answer){
alert("bye");
}
else{
window.location = "http://www.example.com";
}
}
</script>
</head>
<body onunload="con();">
<h1 style="text-align:center">main page</h1>
</body>
</html>
But it confirm after page already closed? How to do it properly?
It would be even better if someone shows how to do it with jQuery?
onunload (or onbeforeunload) cannot redirect the user to another page. This is for security reasons.
If you want to show a prompt before the user leaves the page, use onbeforeunload:
window.onbeforeunload = function(){
return 'Are you sure you want to leave?';
};
Or with jQuery:
$(window).bind('beforeunload', function(){
return 'Are you sure you want to leave?';
});
This will just ask the user if they want to leave the page or not, you cannot redirect them if they select to stay on the page. If they select to leave, the browser will go where they told it to go.
You can use onunload to do stuff before the page is unloaded, but you cannot redirect from there (Chrome 14+ blocks alerts inside onunload):
window.onunload = function() {
alert('Bye.');
}
Or with jQuery:
$(window).unload(function(){
alert('Bye.');
});
This code when you also detect form state changed or not.
$('#form').data('serialize',$('#form').serialize()); // On load save form current state
$(window).bind('beforeunload', function(e){
if($('#form').serialize()!=$('#form').data('serialize'))return true;
else e=null; // i.e; if form state change show warning box, else don't show it.
});
You can Google JQuery Form Serialize function, this will collect all form inputs and save it in array. I guess this explain is enough :)
This what I did to show the confirmation message just when I have unsaved data
window.onbeforeunload = function() {
if (isDirty) {
return 'There is unsaved data.';
}
return undefined;
}
returning undefined will disable the confirmation
Note: returning null will not work with IE
Also you can use undefined to disable the confirmation
window.onbeforeunload = undefined;
This will alert on leaving current page
<script type='text/javascript'>
function goodbye(e) {
if(!e) e = window.event;
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
}
window.onbeforeunload=goodbye;
</script>
In order to have a popop with Chrome 14+, you need to do the following :
jQuery(window).bind('beforeunload', function(){
return 'my text';
});
The user will be asked if he want to stay or leave.
You can use the following one-liner to always ask the user before leaving the page.
window.onbeforeunload = s => "";
To ask the user when something on the page has been modified, see this answer.
Most of the solutions here did not work for me so I used the one found here
I also added a variable to allow the confirm box or not
window.hideWarning = false;
window.addEventListener('beforeunload', (event) => {
if (!hideWarning) {
event.preventDefault();
event.returnValue = '';
}
});
Normally you want to show this message, when the user has made changes in a form, but they are not saved.
Take this approach to show a message, only when the user has changed something
var form = $('#your-form'),
original = form.serialize()
form.submit(function(){
window.onbeforeunload = null
})
window.onbeforeunload = function(){
if (form.serialize() != original)
return 'Are you sure you want to leave?'
}
<!DOCTYPE html>
<html>
<body onbeforeunload="return myFunction()">
<p>Close this window, press F5 or click on the link below to invoke the onbeforeunload event.</p>
Click here to go to w3schools.com
<script>
function myFunction() {
return "Write something clever here...";
}
</script>
</body>
</html>
https://www.w3schools.com/tags/ev_onbeforeunload.asp
Just a bit more helpful, enable and disable
$(window).on('beforeunload.myPluginName', false); // or use function() instead of false
$(window).off('beforeunload.myPluginName');

Categories