I have the following code:
<script>
var myEvent = window.attachEvent || window.addEventListener;
var chkevent = window.attachEvent ? 'onbeforeunload' : 'beforeunload';
myEvent(chkevent, function(e) {
var confirmationMessage = 'HELLO';
(e || window.event).returnValue = confirmationMessage;
return confirmationMessage;
});
</script>
Which runs a small pop up box when the user trys to refresh the page the script is running on.
However, how can I prevent it from running the pop up if they click the Submit button?
This should work. Note that you have to refresh the snippet for your message to appear, but not when you click the button.
var myEvent = window.attachEvent || window.addEventListener;
var chkevent = window.attachEvent ? 'onbeforeunload' : 'beforeunload';
var unloading = true;
myEvent(chkevent, function(e) {
if(!unloading) return;
var confirmationMessage = 'HELLO';
(e || window.event).returnValue = confirmationMessage;
return confirmationMessage;
});
document.getElementById('submit').addEventListener('click', function(e){
unloading = false;
// Because this button does nothing, the reload will load an empty page in SO
// However, note there is no beforeunload event actioned.
location.reload();
});
document.write('Current Time: ' + Date.now())
<input type="button" value="SUBMIT" id="submit" />
Related
We are using following code to show default pop up on refresh, tab close events
var myEvent = window.attachEvent || window.addEventListener;
var chkevent = window.attachEvent ? 'onbeforeunload' : 'beforeunload'; /// make IE7, IE8 compitable
myEvent(chkevent, function (e) { // For >=IE7, Chrome, Firefox
if ($('#timeExpiredtxt').hasClass('hide') && $("#submittedAnsResponseText").hasClass("hide")) {
var confirmationMessage = 'You are attempting an assessment. Are you sure you want to leave this assessment?';
(e || window.event).returnValue = confirmationMessage;
return confirmationMessage;
}
});
I want to remove and unbind this event at runtime. I tried the following code but no luck.
$(window).off("beforeunload");
$(window).off("onbeforeunload");
window.onbeforeunload = null;
$(window).unbind("beforeunload");
Had to change the event binding code.
function closeIt() {
if ($('#timeExpiredtxt').hasClass('hide') && $("#submittedAnsResponseText").hasClass("hide")) {
return "Any string value here forces a dialog box to \n" +
"appear before closing the window.";
}
}
window.onbeforeunload = closeIt;
and unbind used below code
window.onbeforeunload = null;
i have following code which return a popup message for reload page or not.
I have to perform a function when user click on "Reload page" and remain on same page when user click on "Not Reload".
window.onbeforeunload = function()
{
return "";
};
How can i do this?
Try with this:
<script>
var myEvent = window.attachEvent || window.addEventListener;
var chkevent = window.attachEvent ? 'onbeforeunload' : 'beforeunload'; /// make IE7, IE8 compatable
myEvent(chkevent, function (e) { // For >=IE7, Chrome, Firefox
var confirmationMessage = ' '; // a space
(e || window.event).returnValue = confirmationMessage;
return confirmationMessage;
});
</script>
Fetched from this article. This is their demo
I have page reload alerts working, however they even happen when a button press is done as this triggers a page reload. How would I prevent a page reload and fire an alert when the page is refreshed, unless its a button press (Input type is Submit)
var dont_confirm_leave = 0; //set dont_confirm_leave to 1 when you want the user to be able to leave withou confirmation
var leaveMsg = "Dude, are you sure you want to leave? Think of the kittens!";
window.onbeforeunload = function() {
if (window.location.href.indexOf("id=website") > -1 || window.location.href.indexOf("id=partner") > -1) {
dont_confirm_leave = 1;
}
if (document.getElementsByClassName('NextBtn').onclick) {
dont_confirm_leave = 1;
}
if (document.getElementsByClassName('BackBtn').onclick) {
dont_confirm_leave = 1;
}
if (dont_confirm_leave !== 1) {
if (!e) e = window.event;
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = leaveMsg;
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
//return works for Chrome and Safari
return leaveMsg;
}
}
I am trying to give alert to user if user click back button/press F5/ try to reload page.
I am using below script
<script type="text/javascript">
var testEvent = window.attachEvent || window.addEventListener;
var checkEvent = window.attachEvent ? 'onbeforeunload' : 'beforeunload';
testEvent (checkEvent , function (e) {
console.log(e);
var hdnCountValue= $("#" + '<%=hdnCount.ClientID %>').val();
console.log(hdnCountValue);
if (hdnCountValue!= null && hdnCountValue!= "" && hdnCountValue!= 'undefined' && parseInt(hdnCountValue) > 0) {
var msg = 'Warning: You will lose all your data.';
(e || window.event).returnValue = msg ;
return msg;
}
});
</script>
It is working fine in Firefox and chrome.
But in IE9 & 10 it is working sometimes & sometimes not.
And also in safari it works but when user choose to stay on page it changes URL, it shows previous page URL.
I have a system where I want to check with the user if they're sure they want to leave the page once a dirty flag is set.
I'm using the following code - In FireFox, I can look at the page source through FireBug and the tag correctly has the onbeforeunload attribute inserted in it.
In Chrome and FireFox, this doesn't happen though and I'm able to navigate away from the page without any warning at all. The jQuery line to update the body tag is definitely being executed, it just isn't performing it.
if ($("body").attr('onbeforeunload') == null) {
if (window.event) {
// IE and Chrome use this
$("body").attr('onbeforeunload', 'CatchLeavePage(event)');
}
else {
// Firefox uses this
$("body").attr('onbeforeunload', 'return false;CatchLeavePage(event)');
}
}
Any ideas how to proceed from here?
you cannot abort page unload by returning false. you must return string that will be shown to user in a message box, and he decides if he want to leave or stay on the page (by selecting either 'OK' or 'Cancel' button), so you need to write your code like this:
window.onbeforeunload = function() {
return "Are you sure you want to leave this page bla bla bla?"; // you can make this dynamic, ofcourse...
};
try this
<script type=\"text/javascript\">
var dont_confirm_leave = 0; //set dont_confirm_leave to 1 when you want the user to be able to leave withou confirmation
var leave_message = 'You sure you want to leave?'
function goodbye(e)
{
if(dont_confirm_leave!==1)
{
if(!e) e = window.event;
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = leave_message;
//e.stopPropagation works in Firefox.
if (e.stopPropagation)
{
e.stopPropagation();
e.preventDefault();
}
//return works for Chrome and Safari
return leave_message;
}
}
window.onbeforeunload=goodbye;
</script>
window.onbeforeunload = function () { return 'Are you sure?' };
Check this code :
var validNavigation = false;
function wireUpEvents() {
var dont_confirm_leave = 0;
var leave_message = "You sure you want to leave ?";
function goodbye(e) {
if (!validNavigation) {
if (dont_confirm_leave !== 1) {
if (!e) e = window.event;
e.cancelBubble = true;
e.returnValue = leave_message;
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
//return works for Chrome and Safari
return leave_message;
}
}
}
window.onbeforeunload = goodbye;
document.onkeydown = function () {
switch (event.keyCode || e.which) {
case 116 : //F5 button
validNavigation = true;
case 114 : //F5 button
validNavigation = true;
case 82 : //R button
if (event.ctrlKey) {
validNavigation = true;
}
case 13 : //Press enter
validNavigation = true;
}
}
// Attach the event click for all links in the page
$("a").bind("click", function () {
validNavigation = true;
});
// Attach the event submit for all forms in the page
$("form").bind("submit", function () {
validNavigation = true;
});
// Attach the event click for all inputs in the page
$("input[type=submit]").bind("click", function () {
validNavigation = true;
});
}
// Wire up the events as soon as the DOM tree is ready
$(document).ready(function () {
wireUpEvents();
});
It's not pretty, but it did the trick.
var warnclose = true;
var warn = function(e) {
var warning = 'Your warning message.';
if (warnclose) {
// Disables multiple calls
warnclose = false;
// In case we still need warn to be called again
setTimeout(function(){
warnclose = true;
}, 500);
return warning;
}
};
window.onbeforeunload = warn;