In javascript or jquery I need to add an alert when the user clicks on the browser back button that has an ok/cancel button model, but instead of "Ok" it should say Leave and instead of Cancel it should say Stay. Thanks
You can't control the confirmation dialog button text, it's a hard coded feature of confirm() and is whatever the browser has...not much you can do about it.
For the actual display you can use window.onbeforeunload, but it won't be specific to the back button, any action leaving the page will trigger this, for example:
window.onbeforeunload = function() {
return "Are you sure you wish to leave this delightful page?";
}
Related
I am currently do a form page on a tabular form and I detect when a change has been made to the form. If a change has been made to a form and you submit the page (either cancel button or choosing a filter), a confirm box appears which asks you if you want to continue since you will lose all unsaved changes. Now if the user selects Ok, he continues with the page submit. If the user selects cancel the page submission stops. This is where I need help because the filter that starts the page submit process does not go back to its original value, and the tabular form does not filter.
Where I am at:
I am currently getting the original value of the filter before the page submit request. I think I just need a function that can be called on a cancel of the page submission/cancel on the confirm pop up in order to set the filter back to its original value. Does anyone know if this is a possibility or a different way of thinking?
Any thoughts are helpful, Thanks.
I make the onsubmit function return false if I want to cancel the submit.
<form name='DataForm' action='nextpage.php' method='post'
onsubmit='return Ask()'>
</form>
The javascript will look like
function Ask() {
return confirm("Are you sure you want to submit the changes?");
}
When i click Mobile browser back button, It should say the confirmation box like
"Are you wants to leave this page"
If the user click "OK" I need to trigger some function.
It's working fine. But when i click "Cancel" it's not staying on the same page. I tried the below code. But am not able to success.
var unloadEvent = function (e) {
var confirmationMessage = "Are you want to leave this page";
(e || window.event).returnValue = confirmationMessage;
if(confirm(confirmationMessage)) {
//some JS function
} else {
return false;
}
};
window.addEventListener("beforeunload", unloadEvent);
Please help me to solve this issue.
Thanks
You can't modify the default dialogue for onbeforeunload, so your best bet may be to work with it.
window.onbeforeunload = function() {
//Do some other stuff here..
return 'You have unsaved changes!';
}
Here's a reference to this from Microsoft:
When a string is assigned to the returnValue property of window.event, a dialog box appears that gives users the option to stay on the current page and retain the string that was assigned to it. The default statement that appears in the dialog box, "Are you sure you want to navigate away from this page? ... Press OK to continue, or Cancel to stay on the current page.", cannot be removed or altered.
The problem seems to be:
When onbeforeunload is called, it will take the return value of the handler as window.event.returnValue.
It will then parse the return value as a string (unless it is null).
Since false is parsed as a string, the dialogue box will fire, which will then pass an appropriate true/false.
The result is, there doesn't seem to be a way of assigning false to onbeforeunload to prevent it from the default dialogue.
Additional notes on jQuery:
Setting the event in jQuery may be problematic, as that allows other onbeforeunload events to occur as well. If you wish only for your unload event to occur I'd stick to plain ol' JavaScript for it.
jQuery doesn't have a shortcut for onbeforeunload so you'd have to use the generic bind syntax.
$(window).bind('beforeunload', function() {} );
This answer is suggested by Owen on the question: override onbeforeunload
Thanks Owen.
I want to skip the default pop up which will come on beforeunload event and want to show my own modal which is asking the user to give feedback on browser/tab close. In that modal if user click "OK" then I want to redirect the user to my feedback page and if the user clicks "NO" then the particular tab should close. Is there a way to do this?
As you can read here: https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload you may change the event.returnValue of the beforeunload event to a custom string. Like this:
window.addEventListener("beforeunload", function( event ) {
event.returnValue = "Don't leave!";
});
This will open a confirm dialog when the user is leaving the current page.
You may open your modal window in this event, but this will not stop the user form leaving, so new content will not be seen.
Of course the unload event can not be canceled (https://developer.mozilla.org/en-US/docs/Web/Events/unload) and UI interactions are ineffective (window.open, alert, confirm etc.)
So i think the closest you can get it this: http://jsfiddle.net/s6qWr/
var $modal = document.getElementById("modal");
window.addEventListener("beforeunload", function(event){
$modal.classList.add("visible");
event.returnValue = "Please tell us about your experience";
});
I have this inside my $(document).ready function:
$(window).unload(function() {
check_saved();
});
check_saved() just triggers a dialog box that asks the user if they would like to save their form data before leaving the page. The browser displays the dialog box but then navigates away instantly. I want the browser to wait until the users clicks a button, just like it would for a normal alert(). How do I do this? Also, chrome seems to ignore the unload event? Any ideas?
How the user navigate to another page? Let say user is doing it by clicking some link on the page. then you can check in that action instead of page unload.
$('a').click(function(e){
if( check_saved()!=true){
e.preventDefault();
return false;
}
});
I have a window.onbeforeunload function which generates the default message:
"Are you sure you want to navigate away from this page...." .
If we click on OK we are redirected to a new link and if we press cancel we are redirected back to the same page.
I want to save some data from the page when we press OK and move away from the page. How can we know if OK or cancel has been pressed, then make an event call and continue with the "ok"/"cancel" option.
A possible approach might be to hook into the onunload event as well, and if that handler is called, you know that the user chose OK.
In onbeforeunload, set a timeout callback that is called some time afterwards (e.g. 1 second), and if it is called, the user might have selected Cancel.
Not sure how safe this is regarding race conditions though.
function leavePage() {
//do your thing like saving the data in the session
return "Some data entered may be lost."; //a text needs to be returned
}
window.onbeforeunload = leavePage;
Are you using JavaScript 'confirm' dialog?
if(confirm("Are you sure you want to navigate away from this page....")) {
// OK was pressed
} else {
// Cancel was pressed
}