JavaScript Popup to save modification on a page - javascript

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)

Related

How to disable "Leave site?. Changes you made may not be saved" pop up in angular?

I'm trying to close the browser after I have reached a order confirmation page and it throws a alert as shown below. This creates a misconception to user that his changes are unsaved. So I want to avoid this pop up.
I know this alert is triggered because of beforeunload event.
Solution that I have tried:
window.addEventListener("beforeunload",(event)=>{
return null;
})
and
window.onbeforeunload=null;
I'm not using jQuery in my application. Is there any other way that I can disable this event from firing.
Links that I have tried:
How to disable/override "Do you want to leave this site?" alert?
Disable "Changes you made may not be saved" pop-up window
How to disable "Changes you made may not be saved." dialog box (Chrome)?
None of them are working for me.
How can I achieve this without jQuery?. What I'm confused about is how to handle this event so that it doesn't show the pop up.
I'm using Chrome Version 101.0.4951.64
This could be due to some third-party library or other functionality in your code that listens for the "beforeunload" event and perhaps modifies the value of event.returnValue.
This workaround may work for you.
window.addEventListener('beforeunload', function (event) {
event.stopImmediatePropagation();
});
This will prevent the execution of the other listeners in the chain.
It is important to include this code at the top of the app to ensure that your function is executed first.
In the case of Angular, a good place can be in the ngOnInit of the AppComponent.
Check here.
Just adding a MDN documentation of beforeunload event for reference.
https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
When this event returns (or sets the returnValue property to) a value other than null or undefined, the user will be prompted to confirm the page unload.
Internet Explorer does not respect the null return value and will display this to users as "null" text. You have to use undefined to skip the prompt.

How to storeConfirmation in popup SeleniumIDE

Can u help me about StoreConfirmation for popup SeleniumIde ? + example command.
please answer only selenium IDE.
Thanks
If you are talking about default javascript alert or confirmation there are two commands for it:
storeAlert
Returns:
The message of the most recent JavaScript alert
Retrieves the message of a JavaScript alert generated during the
previous action, or fail if there were no alerts.
Getting an alert has the same effect as manually clicking OK. If an
alert is generated but you do not consume it with getAlert, the next
Selenium action will fail.
Under Selenium, JavaScript alerts will NOT pop up a visible alert
dialog.
Selenium does NOT support JavaScript alerts that are generated in a
page's onload() event handler. In this case a visible dialog WILL be
generated and Selenium will hang until someone manually clicks OK.
storeConfirmation
Returns:
the message of the most recent JavaScript confirmation dialog
Retrieves the message of a JavaScript confirmation dialog generated
during the previous action.
By default, the confirm function will return true, having the same
effect as manually clicking OK. This can be changed by prior execution
of the chooseCancelOnNextConfirmation command.
If an confirmation is generated but you do not consume it with
getConfirmation, the next Selenium action will fail.
NOTE: under Selenium, JavaScript confirmations will NOT pop up a
visible dialog.
NOTE: Selenium does NOT support JavaScript confirmations that are
generated in a page's onload() event handler. In this case a visible
dialog WILL be generated and Selenium will hang until you manually
click OK.
You can see working example here : http://www.software-testing-tutorials-automation.com/2013/10/selenium-ide-what-is-use-of.html
Hope it will help you.

Unexpected behaviour of onbeforeunload handler/function in firefox 32.0.3 and IE

I am trying to show a confirmation box when the user leaves the page and then use its returned value in onbeforeunload handler/function like
window.onbeforeunload = closingCode;
function closingCode(){
return confirm("You are leaving the page without saving some data. Do you want to continue?");
}
When this function is executed in the mentioned version of firefox, The window gets directly closed or refreshed without showing any confirmation dialog. I have tried to debug the script with firebug which shows that this function executes.
But when I use the code written below, A built-in browser confirmation dialog appears with a generic message.
window.onbeforeunload = closingCode;
function closingCode(){
return false;
}
In Internet Explorer 8, the first code snippet results in two confirmation dialogs. One is mine and the other one is browser's default. whereas the the second snippet behaves the same.
I've tested this functionality here in stackoverflow, and found that It also shows a built-in confirmation dialog with the same generic message.
Is it possible to show a window.confirm() dialog, with desired message, in onbeforeunload handler/function or not? If yes, then kindly tell me how. Else, tell me why its not possible and provide some related links.
The onbeforeunload handler is supposed to return a string. The browser will then display this message in a prompt.
function closingCode () {
return "You are leaving the page without saving some data. Do you want to continue?";
}

How to show a modal dialog before beforeunload shows its own?

I do understand that it's not possible to replace the beforeunload dialog with a custom one, and that if we need to set a custom message to the user, we'll have to return a string in our beforeunload handler:
{Custom message here set by returning a string in our beforeunload handler}
Are you sure you want to leave this page?
[Leave this page] [Stay on this page]
So, how about showing a custom modal dialog (maybe jQuery) before the actual beforeunload dialog is shown by the browser?
My current code uses Fancybox:
window.onbeforeunload = function() {
$.fancybox({ 'type':'iframe', 'href':'/PopupOnExit.php' });
return "Special offer! Stay on this page for more details.";
};
However, this shows the browser's dialog first, and only after clicking either "Stay" or "Leave" buttons does the browser show my modal dialog.
Is there any way to make my modal dialog show before the the browser's dialog?
The DOM modifications take effect only when your script ends execution. In this case, the native dialog is fired first for obvious security reason.
Note that due to the many security problem introduced by this unspecified feature (see the MDN doc), it will maybe be removed (the soonest the best in my opinion), the old reason to have it (save the data) being obsolete in the age of ajax.
unload and onBeforeUnload are very not cross-browser events. Be careful.
It's not work in Opera and sometimes in Chrome.

Display a confirm message

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.

Categories