Display a confirm message - javascript

Want to display a "confirm" message in my asp.net application, when the window closes, but when the Cancel button is pressed, the page closes, the event is not Canceled.
I tried a different approach: I use
event.returnValue = "Message";
This approach works (when cancel is pressed, page does not close), but I get the "Message" that I specify plus some other message; "Click Accept or Cancel to cancel" or something similar.
How can I create a message on the client side that only displays the text that I specify?

You can't. The confirm message shown when a script attempts to prevent browser close/leaving the page is in part defined by the browser. You can only define part of the message.

This can't be done as a confirm message is shown when script attempts to change the closing behavior of the page by the browser

window.onbeforeunload = function() {
if(!confirm("Well?"))
return "PLEASE STICK AROUND!";
}
Note: onbeforeunload fires when the document is unloaded, not the window. So every redirect will fire the event. I'm afraid this is the best you can do.

Related

JavaScript Popup to save modification on a page

When I modify my email and I want to leave that page, Gmail sends a popup with a message of "changes you made may not be saved" with two button leave and cancel.
How should I make a popup like that in javascript? I put the sample of the popup in the follow. Sorry, I didn't know anything about JS.
You can achieve desired result by adding a listener to beforeunload event for window. Here's an example from MDN:
window.addEventListener('beforeunload', function (e) {
// Cancel the event
e.preventDefault();
// Chrome requires returnValue to be set
e.returnValue = '';
});
To test the code above, run this into browser console and try to closing the browser tab.
For more detailed guide, look into MDN article.
This popup is a "alert popup".
You can display a simple one with alert() function.
Or one with a confirm/cancel with confirm() function.
you can find more info there https://www.w3schools.com/js/js_popup.asp (on alert popup and js in general)

How to display custom message in the Exit Confirmation Dialog, NOT the default browser message

I want to show confirmation dialog if user leaves the page after make changes.
I have that code and it work fine but the problem is that the message in the confirmation dialog is not my custom message but it is default message that belong to the Browser and each Browser has its own message.
window.onbeforeunload = myFunction;
function myFunction() {
if (inputChanged)
return "You do not save the changes";
}
I wwant to display my own message in the confirmation dialog.
The browser might do that, I guess they do it because the user might be deceived by some trickery in the prompt.
Note: To combat unwanted pop-ups, some browsers don't display prompts created in beforeunload event handlers unless the page has been interacted with; some don't display them at all. For a list of specific browsers, see the Browser_compatibility section.
Source: https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

Hook before refreshing a page

I have a page where a user can upload a bunch of files as part of a form. The files are uploaded to the cloud with each addition. If they cancel the form, the files are deleted from the cloud. If they refresh the page or close the browser before completing, I would also like to delete those files from the cloud. Is it possible to hook into these events?
The same way ytou have onload when the page load, you have unload when you, well, unload.
Confirmation before closing of tab/browser
How to show the "Are you sure you want to navigate away from this page?" when changes committed?
If you want to add an message before that, onbeforeunload seems to do the trick:
Implementing "this page is asking you to confirm that you want to leave"
<html>
<body onunload="javascript:alert('Beep!');" onbeforeonload="javascript:return confirm('I beep first. Continue?');">
Close me for an alert
</body>
</html>
*Disclaimer: This is a terrible example, do not inline javascript.
You are looking for window.onunload = myFunciton: http://www.w3schools.com/jsref/event_onunload.asp
Execute a JavaScript when a user unloads the document:
<body onunload="myFunction()">
You want something like this:
window.onbeforeunload = handler;
In the handler itself you also can return some string that is shown in the resulting alert box (which is always displayed by the browser, you cannot control that). However the return value does not work in Firefox which will ignore your message. Also note that you only can have one beforeunload handler.

Handling Re-direct in Dirty Form

On my form, a user can modify it, i.e. make it dirty, and then click the Cancel button.
The Cancel button's onClick() behavior is to change window.location.
However, when I press the "Cancel" button, I notice that the window.location only changes if I click "OK" (IE8) or "Leave this Page" (FF or Chrome). But, if I click "Cancel" (IE8) or "Stay on this Page" (FF or Chrome), then the actual window.location does not change.
How does this work?
EDIT including code:
function (buttonPressed) { // called when Cancel button is pressed
window.location = ...;
}
As #マルちゃん だよ said, you can't force a redirect if the user doesn't allow it. It just won't happen. However, the question that needs to be asked is what your "Cancel" action does, and whether you actually need to use Javascript for it.
If you want the cancel button to reset the entire form, there are ways to do that, either
Using a button with type=reset, or
Using the form.reset function
Alternatively, if cancelling is meant to take the user to a different location, then while the words may say cancel, the button is actually submitting the form and relocating them. So, make the button a type=submit, capture the fact that the form was cancelled (maybe even store it so the user can return to it later), and redirect them server side to the right page. This has the added benefit that you can track how many users are cencelling, and working when Javascript is turned off or unavailable.
What you are asking for would be a major security breach. I'm afraid you will never be able to do that.
You can, however, have control over child windows the parent has opened. Say you opened a popup with a parent window, that same parent window can have a button to close the child. Never the main window.
As for the "Cancel" event on that confirmation dialog, you could always handle it:
window.onbeforeunload = function () {
if (confirm('Are you sure you want to leave this page?')) {
return; // allow user to exit without further annoying pop-ups
} else {
// Handle the Cancel event
// ...
return "Do you really, really want to Exit?"; // Make the browser ask for confirmation again
}
}
If the user does something to leave the page, then you can tell the browser to ask them if they are sure. You cannot silently prevent them. If the user wishes to leave the page, then they can do so (dodgy sites full of adverts and/or malware would love it to be otherwise, thankfully it isn't)

Onbeforeunload - windows assign doesn't work in Chrome

I'm trying to make "stay on page" button redirect to custom address. I found this code and it works in Firefox on OSX and PC, but in Chrome it doesn't do anything.
Am I missing something?
$(document).ready(function() {
window.onbeforeunload = function(){
location.assign('http://www.nba.com');
return "Play ball";
}
});
if a user wants to navigate away from your page or close the browser window then all you can do is either (1) Let Them [preferred] or you can (2) tap into onBeforeUnload event which is nothing more than an "are you sure?" pop-up message allowing the user to either stay on the page or not.
your code above that says return "Play ball" is what determines the message to display in the "are you sure?" dialog. if you don't return a string then you can execute clean up code before exiting without the user seeing the pop-up warning. chrome is smart not to let window navigation code execute before the return statement.
you should definitely NOT use onBeforeUnload for page redirection / site navigation.
if you post additional code and what you are trying to accomplish there is probably a better event for you to tap into.

Categories