I'd like to create an onbeforeunload "You have made edits to the page. Stay On This Page, Leave This Page" jQuery plugin.
The plugin will need to:
Accept a containing element. $(".editableFieldContainer").beforeUnload()
Autodetect changes to not(:hidden) input/textarea/selects.
Prompt user to stay on the page if elements within the containing element have changed.
except if the page was submitted via form.
except if the page/user wants to cancel the changes, e.g., a "Cancel" link/button was pressed.
Something like this (but not quite, it is missing some features):
(function(){
var changed = false;
$.beforeUnloadCanceled = false;
$.fn.beforeUnload = function(){
$.beforeUnloadCanceled = true;
return $(this).delegate("input,select,textarea", "change", function(){
changed = true;
});
});
window.onbeforeunload = function(){
if(changed && !beforeUnloadCanceled){return "You have made edits to the page.";}
};
}());
Is there already a decent plugin that does this?
This could be what your looking for.
jquery.wtFormDirty-2.0.2.js
Related
I have the following JavaScript:
var leave_page_confirm = true;
function save_data_check() {
var msg;
if (leave_page_confirm === true) {
$('.input-right').each(function() {
if (this.value) {
msg = 'You have unsaved data on this page.';
return false;
}
});
}
return msg;
}
window.onbeforeunload = save_data_check;
This confirm box displays when you have unsaved data in a form on my pages.
However, when it appears the emphasis (default button) is "Leave This Page" I would like the emphasis to be on "Stay on This Page" despite quite a bit of Googling, I can't seem to find any code that changes the emphasis of the buttons on a confirm alert.
Is there any way to accomplish this?
You might want to refer to this question:
How to personalize alert buttons - window.confirm() and window.alert()
Basically, you can't. But you can make your own modals for this kind of thing and have full control over what it looks like and which buttons are emphasized.
You just can't do this.
Here's the docs https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload
BTW, you can try to find out another way to say users about unsaved data. It might be a UI solution, some outlines, messages etc.
I need to prompt a user when they are leaving my ASP.Net page unexpectedly with a message to ask if they are sure they want to leave. A post back or when the save button is clicked should not fire the warning. There are a bunch of articles covering this but I am brand new to this and appear to have got my wires crossed.
The recommended way appears to be to use the window.onbeforeunload event but behaves unexpectedly for me. This is fired when the page loads as opposed to when the page unloads.
<script language="JavaScript" type="text/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>
If I use the JQuery implementation it fires when the page unloads but the problem is it fires before the code behind is executed. So I cannot set a variable on the client saying don’t fire the event this time as it is a post back or a Save.
$(window).bind('beforeunload', function () {
return 'Are you sure you want to leave?';
});
Can anyone point me in the correct direction as I know I am making basic mistakes/miss-understanding?
Edit:
So I am nearly there:
var prompt = true;
$('a').live('click', function () {
//if click does not require a prompt set to false
prompt = false;
});
$(window).bind("beforeunload", function () {
if (prompt) {
//reset our prompt variable
prompt = false;
//prompt
return true;
}
})
Except the problem is in the above code I need to be able to differentiate between the clicks but I haven't been able to figure that out yet i.e. I am missing a condition here "//if click does not require a prompt set to false".
Any ideas?
Thanks,
Michael
You can try using this:
$(window).unload(function(){
alert('Message');
});
In case people are interested this is the roundabout solution to my problem. How to tell if a page unload in ASP is a PostBack
I was wondering what is the best way of checking if a page is dirty if a user chooses to navigate it from it. For example, there is a registration form and the user enters all his information. Then accidentally clicks on a link to navigate from it.
I found this on the web where it checks if a page is dirty if a person makes changes to any of the form input values.
<script type="text/javascript">
var isDirty = false;
var msg = 'You haven\'t saved your changes.';
$(document).ready(function(){
$(':input').change(function(){
if(!isDirty){
isDirty = true;
}
});
window.onbeforeunload = function(){
if(isDirty){
return msg;
}
};
});
</script>
So this works great. But how do I exclude some links that are pop-ups? Is there a better way of doing this?
You should add onclick event listener on these inputs and "return false;"
Something like
$('a.className="popup"').onclick = function(){return false};
or
Text
in my web application if the user leaves the current page without having saved changes in the form a pop up window is opened to alert him about that.
For the pop up I use some scripts code injected from codebehind (C#):
var Confirm = true;
window.onbeforeunload = confirmClose;
function confirmClose()
{
if (!Confirm) return;
if(/*CHECK CHANGE CONDITION IS TRUE*/)
{ return " + WARN_message + "; }
}
I would need to intercept whether the user click on cancel or ok button.
I tried like:
var button_pressed = window.onbeforeunload = confirmClose;
But it returns always true.
How can get which button was pressed?
Thanks
Not possible. There is no event associated with the buttons.
What you might be able to do was to see if the user came back by setting a value or perhaps a cookie in the page in the onbeforeunload and test if it is there after some time has passed
but see the duplicate Way to know if user clicked Cancel on a Javascript onbeforeunload Dialog?
I want to know how can I display a confirmation box when the users try to get out of the page, like this one here in StackOverflow when you try to close the "Ask Question" page.
Thanks you in advance.
Actually, all that is necessary is this:
window.onbeforeunload = function(){ return "You should save your stuff."; }
This is also kind of a dupe of this: How to show the "Are you sure you want to navigate away from this page?" when changes committed?
In javascript, attach a function to window.onbeforeunload, like so:
window.unbeforeunload = function (e)
{
// return (prompt ('Are you sure you want to exit?'));
// EDIT: Amended version below:
var e = e || window.event;
if (e) e.returnValue = 'Your exit prompt';
return 'Your exit prompt';
}
EDIT:
As the comments below indicate, I had misunderstood the working of the event. It should now work as intended.
Ref: window.onbeforeunload (MDC)
probably a dupe: How do you prevent a webpage from navigating away in JavaScript?, but you can do this by adding an delegate to the window.onbeforeunload event
<script type="text/javascript">
window.onbeforeunload = function() {
//will show a dialog asking the user if
//they want to navigate away from the current page
// ok will cause the navigation to continue,
// cancel will cause the user to remain on the current page
return "Use this text to direct the user to take action.";
}
</script>
Update: doh! updated code to do what the OP really wanted :D
You want to catch the onbeforeunload event of window. Then if you return a string, the browser will display your message in a prompt. Here's an article with sample code.
You can use the window.onbeforeunload event to catch this. If there is any value inside the textarea then an alert message is shown.
That's browser based.
As long as you implement <form> tag, and you type in something in the form, and in Google Chrome, it will prompt you that message.