On the cart page of my website, I have to intercept the user leaving the page and ask them if they want to save their cart via email.
I guess I have to use the event "beforeunload" to intercept the user leaving the page, but then I have two problems:
How to exclude from the "beforeunload" trigger the click on the link to proceed with the payment?
How to prompt a small form where I can ask for his email (to be used somehow later) and then proceed with the unload of the page?
For excluding on the link to proceed with the payment, you can do this :-
window.onbeforeunload = function() {
return "You're leaving the site.";
};
$(document).ready(function() {
$('a[rel!=ext]').click(function() { window.onbeforeunload = null; });
$('form').submit(function() { window.onbeforeunload = null; });
});
The only thing u can do is making a default browser messagebox appears...
window.onbeforeunload = foo;
function foo(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();
}
}
Related
I tried onbeforeunload as it requires once user-interaction to call, is there any way to call an event without user-interaction as the user exit the browser after it opens the application tab.
Or Any other solution without using onbeforeunload that prevents the user to exit the browser.
window.onbeforeunload = function (event) {
var message = 'Important: Please click on \'Save\' button to leave this page.';
if (typeof event == 'undefined') {
event = window.event;
}
if (event) {
event.returnValue = message;
}
return message;
};
$(document).ready(function(){
$(".label").click(function(){
alert('label');
window.onbeforeunload = null;
}
);
$(".new_cont").click(function(){
alert('new_cont');
window.onbeforeunload = null;
}
);
})
In both FireFox and Chrome you need at least one interaction with the page.
Since this feature is to avoid losing data which was entered by the user, if no action happened on the page, then the user did not enter any data.
This is because the onbeforeunload is attached to the 's window object, and when you unload the main page, this event won't fire unless you had focus on this iframe.
<script type="text/javascript">
window.onbeforeunload = function () {
return "Did you save your stuff?"
}
For reference https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload
How do I restrict my user from closing the tabs or browser while accessing any specific page.
window.onbeforeunload = function(e) {
if (!e) e = window.event;
e.cancelBubble = true;
e.returnValue = 'You sure you want to leave?';
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
return 'You sure you want to leave?';
return false;
}
I tried above code but it gives popup for leave the page or stay on the page on chrome browser.
You can't.
The browser is software that belongs to the user. It is completely under their control. If they want to quit, they can quit.
You need to design your system so it is robust enough to handle people quitting part way through.
I am using window.onbeforeunload method to show confirm message if user leaves website.
window.onbeforeunload = function(e) {
return textMsg;
};
But I need this to be fired only if user navigates to external web-site or closes window.
So how to cancel this confirm message for all XHR inside same domain and form submit etc?
Try (untested code):
window.onbeforeunload = function(e) {
return textMsg;
};
$('a:not([href^="http"])').on('click', function() {
window.onbeforeunload = null; // prevent message
});
$('form').on('submit', function() {
window.onbeforeunload = null; // prevent message
});
This will prevent the event from triggering if links do not start with http (external links) and for <form> submits. Looking for a solution for window closing at the moment.
I'm using the following function to prevent double submissions:
$("#form").submit(function () {
var form = $(this);
form.find("input[type=submit]").attr("disabled", "disabled")
form.find("input[type=submit]").attr("value", "Processing");
});
It works fine, but then I have the following code which triggers an alert to avoid accidentally leaving the page:
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 = '¿DO YOU REALLY WANT TO LEAVE THIS PAGE?'; //This is displayed on the dialog
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
}
window.onbeforeunload=goodbye;
The problem is if the user clicks submit and the realizes he didnt want to leave the page and clicks on stay on this page instead, the submit button is still disabled.
How could I re-enable it upon clicking stay on this page?
Thanks!
The button problem
You want to disable and enable the submit button so you know you going to touch the same kind of function and object twice, it is better to make advantage out of this in a function
function disableSubmit(form, enabled){
var submit = form.find("input[type=submit]"),
dataVar = enabled !== true ? "processing-message" : "send-message",
message = submit.data(dataVar);
submit.prop('disabled', (enabled !== true) );
submit.val(message);
}
I could make it even more generic for using it on each form. But the message in the button will display whatever you put in the data-attribute.
Cancel Submit
There is a problem with cancellation of an onbeforeunload event; there is no callback for it. The solution I came with is using a timeout. Since you don't know if the person canceled or not, I think 2 seconds is enough for the page to submit.
You have to have 2 seconds patient to get the submit button enabled again. But you can adjust it all you want of course
if (e.stopPropagation) {
setTimeout(function () {
disableSubmit(formObject, true);
}, 2000);
e.stopPropagation();
e.preventDefault();
}
The JSFiddle example
I have several functions running on a postback that can take a little time to complete.
When postback is initiated I show a loading image with this code:
function showLoader()
{
document.getElementById("<%=loadingImage.ClientID%>").style.visibility="visible";
}
I want to be able to add code to this function so if user tries to leave at this point they are informed the operation is not complete.
I found this code:
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;
This works but I only want the code to be active when the loading image is active.
I tried the following but it shows the alert message when the page eventually posts back:
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();
}
}
function showLoader()
{
document.getElementById("<%=loadingImage.ClientID%>").style.visibility="visible";
window.onbeforeunload=goodbye;
}
Any ideas how I can tweak this to just show when user leaves page and not when postback completes?
You need to set window.onbeforeunload to null when a form get submitted. So, basically:
<form onsubmit="window.onbeforeunload=null">
To apply this on all forms dynamically, I'd suggest to write a window.onload function for this which does this without the need to edit every single form on all your pages.