Actually prevent this page from creating dialogs - javascript

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;
});

Related

Fire onbeforeunload confirm alert for external sites only

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.

JQuery / dirty forms / window.onbeforeunload only triggered after link selection

I'm trying to implement a warning for the users in case they are leaving the form without saving.
The warning dialog works as expected but with the only exception that when the user chooses to 'Stay on Page', the selected side menu entry changed to the one the user clicked on (form is the same).
How can I make sure that the same menu item is still selected once the user chooses to 'Stay on Page'?
var warnMessage = "Unsaved changes. Do you really want to leave the page?";
$(document).ready(function () {
$('a.k-link').on('click', function () {
window.onbeforeunload = function () {
if (isDirty) return warnMessage;
}
});
});
You might find it easier (and possibly more consistent across browsers) to use a confirm prompt (remember, it's a blocking dialog).
<script>
var warnMessage = "Unsaved changes. Do you really want to leave the page?";
$('a.k-link').on('click', function (e) {
if (isDirty && !confirm(warnMessage)) {
e.preventDefault();
}
});
</script>
There are at least two reasons to avoid onbeforeunload:
The spec doesn't require a browser to display the message you
provide, and not all browsers do, and
the correct event is actually beforeunload
You can and should handle this event through window.addEventListener() and the beforeunload event. More documentation is available there. (MDN)
I'm just guessing, since the Kendo UI scripts aren't exactly fun to read through, but the 'selected' class is getting applied because a navigation event was started, even though you cancel it; the Kendo script is probably just listening for a successful click. onbeforeunload and beforeunload both happen after the click event has resolved (AFAIK, anyway).
Following worked for me (adding e.stopPropagation):
$('a.k-link').on('click', function (e) {
if (isDirty && !confirm(warnMessage)) {
e.preventDefault();
e.stopPropagation();
} });
or by returning false:
$('a.k-link').on('click', function (e) {
if (isDirty && !confirm(warnMessage)) {
return false;
} });

Angularjs: capture the refresh event in the browser

In angularjs is possible handle the user clicking the Refresh button on the browser?
There is any method that the framework expose to the developer?
Thanks
To handle the reload itself (which includes hitting F5) and to take action before it reloads or even cancel, use 'beforeunload' event.
var windowElement = angular.element($window);
windowElement.on('beforeunload', function (event) {
//Do Something
//After this will prevent reload or navigating away.
event.preventDefault();
});
You can use $routeChageStart:
$rootScope.$on('$routeChangeStart', function () {
alert('refresh');
});

javascript - Prevent page loading

I want to prevent the page loading when "Editing" on m page occures.
so i got this code
window.onbeforeunload = function() {
return "Are you sure you want to navigate away?";
}
Now i need to unbind this from the page.
is there any methods available ?
Thank you.
You set the handler to null:
window.onbeforeunload = null;
To unbind the event, set it to null:
window.onbeforeunload = null;
It may however be better for program flow to put a condition inside your onbeforeunload handler, so that you have a single function running on page unload:
window.onbeforeunload = function() {
if (myVar == "Editing")
return "Are you sure you want to navigate away?";
}
You should use some flag to check if page is editing values or just navigating to other page
you can follow this thread too
Javascript, controlling an onbeforeunload tag

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/

Categories

Resources