Show popup message when click Browser Back button Using Javascript - javascript

When user click on browser back button, user will see a alert message for that I am using below code.
window.onbeforeunload = function () { return "If you want to go back to previous page Please use Previous step Button in below"; };
But in the code I have written "If you want to go back to previous page Please use Previous Step Button in below". This message is not displaying in alert box,instead of that message it is showing another message:
.
How can I display my own message in the alert box?

You will need to put javascript/jquery code you want to use on a handler for beforeunload event
window.addEventListener("beforeunload", function (event) {
//your code goes here. Create modal window or whatever you need
});

Related

Preempt moving to another page with a pop-up

Let's say I have an update page in HTML5 and if the user edited a field, I want to show a pop-up whenever the user will exit the page (by clicking on another link) without clicking the update button. The pop-up will confirm if the user wants to save his edits or if the user declined, simply continue on the link he clicked before. How to achieve this in HTML5/JavaScript? Is there any function that preempts redirects? Thanks.
Use the onbeforeunload event.
Check out the demo: onbeforeunload Demo
JS code:
<script language="JavaScript">
window.onbeforeunload = confirmExit;
function confirmExit()
{
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
</script>

Cucumber, confirm browser dialog which shows when page starts to refresh

When one scenario is done, the page refreshes (in the website there is a javascript modal implemented before refreshing the page which asks the user "Are you sure you want to leave the page?"). I need to confirm that modal. But when I create the step for that, I always get this error:
Then User clicks "Leave this page" button in the popup at online reg form
no alert open
(Session info: chrome=35.0.1916.114)
and the code
And(/^User clicks "([^"]*)" button in the popup at online reg form$/) do |button|
wait = Selenium::WebDriver::Wait.new
alert = wait.until { page.driver.browser.switch_to.alert }
alert.accept
end
Does anyone know how to handle this?
You need to override the confirm dialogue method in javascript to always return true
page.evaluate_script('window.confirm = function() { return true; }')
use this line before the line of code that triggers the dialogue to popup and it will always accept it no more steps needed :)

detecting OK on alert

I used this code:
<script type="text/javascript">
function finish()
{
alert("Inserted!");
}
</script>
I want when the user clicks on "OK" of alert,it goes to another php page.
how can I undersatand when user clicks OK?
and how I can link to another page?In common I use this way:
<button type="submit" onclick="window.open('home.php')"> Insert </button>
but in alert example there is no button!
thanks
alert() is blocking: The browser will stop executing any Javascript code while an alert() is being displayed. The next line of code after the alert() will only be executed when the alert box is cleared.
Therefore, you don't need to do anything special to tell if an alert has been cleared; just put the rest of your code to run after the alert().
There is no result to alert. You can use window.location to redirect.
function finish()
{
alert("Inserted!");
window.location = 'newpage';
}
how can I undersatand when user clicks OK?
alert() is blocking, script execution pauses while it is displayed. When the user clicks OK, the script will continue running. Just put whatever other code you want after the alert statement.
and how I can link to another page?
You can set location to a new URL…
location = "http://example.com/";
… but generally speaking, you would be better off running the function as a click event handler of a regular link.
You can redirect by calling window.location=URL.
Alert is modal, it just gives information and then is dismissed. The script will continue executing after the alert message is dismissed.
If you want to just redirect after the user reads the alert message, you could use:
function finish() {
alert("When you click OK you will go to a new page.");
window.location = "http://www.yoururl.com";
}
On the other hand, Confirm gives the user a question and returns true/false based on the user response. This is probably what you should use instead.
In this case your function could look like this:
function finish() {
var continue = confirm("Finish and go to the next page?");
if (continue) {
window.location = "http://www.yoururl.com";
}
}
With either finish function, just attach it to the button however you want. The most direct way would be like you've done in your question:
<button type="submit" onclick="finish()"> Insert </button>
Note, though, if your button is in a form and you bind with onclick, the form is actually going to be submitted anyway unless you bind to the submit event and prevent it.

custom popup on window close

i have a jsp file .whenever user closes the screen a pop up with custom message and two custom buttons ( continue and cancel ) should appear .by clicking continue button u should go to another page .and cancel button to stay on the same page .......plz help me out how cud these be achieved ..
Is there a way to change default message I am getting 'Are you sure you want to navigate away from this page?' and then 'Press OK to continue, or Cancel to stay on the Current page.' Can I only display 'my message' in between this two messages?
I am using below javascript codes:
<script type="text/javascript">
function beforeClose()
{
return "my mssage...";
}
window.onbeforeunload=beforeClose;
</script>
check out this thread for your answer
How can I override the OnBeforeUnload dialog and replace it with my own?

jQuery Exit Popup Redirect?

So I've been looking around for hours, testing multiple versions, testing some of my own theories and I just can't seem to get it working.
What I'm trying to do is use alert or confirm (or whatever works) so popup a dialog when a user tries to navigate away from a purchase form. I just want to ask them "Hey, instead of leaving, why not get a free consultation?" and redirect the user to the "Free Consultation" form.
This is what I have so far and I'm just not getting the right results.
$(window).bind('beforeunload', function(){
var pop = confirm('Are you sure you want to leave? Why not get a FREE consultation?');
if (pop) {
window.location.href('http://www.mydomain/free-consultation/');
} else {
// bye bye
}
});
$("form").submit(function() {
$(window).unbind("beforeunload");
});
This is showing confirm dialog to user, want to stay or leave page. Not exactly what you looking for but maybe it will be useful for start.
function setDirtyFlag() {
needToConfirm = true; //Call this function if some changes is made to the web page and requires an alert
// Of-course you could call this is Keypress event of a text box or so...
}
function releaseDirtyFlag() {
needToConfirm = false; //Call this function if dosent requires an alert.
//this could be called when save button is clicked
}
window.onbeforeunload = confirmExit;
function confirmExit() {
if (needToConfirm)
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
Script taken from http://forums.devarticles.com/showpost.php?p=156884&postcount=18
Instead of using the beforeunload and alert(), I decided to check whether or not the users mouse has left the document. See code below:
$(document).bind('mouseleave', function(event) {
// show an unobtrusive modal
});
Not sure whether it will help.
You need to stop the propagation before showing the Confirm / Alert.
Please refer http://jonathonhill.net/2011-03-04/catching-the-javascript-beforeunload-event-the-cross-browser-way/
Look at the last comment.
Try this:
window.onunload = redirurl;
function redirurl() {
alert('Check this Page');
window.location.href('http://www.google.com');
}

Categories