i am working on asp.net site that contains say three pages
page1.aspx
page2.aspx and page3.aspx
I want if user redirects from page1, alert box asking for confirmation should come. For this i have written following code
window.onbeforeunload = function () {
return 'Are you sure you want to leave?';
};
But this code run on every postback to server including pressing F5.
I want this code to run only when user redirects to any of remaining two pages
how can do this ??
try this code in javascript onload event in the pages only
if(confirm("Are you sure you want to leave?"))
{
//redirect to next page
return false
}
Handling in window.onbeforeunload may not be the straight forward way to do it since the alert message will be shown each and every time you load the page.
What you could do instead is call the confirmation js function in the from the DOM object that could possibly take the user to the different page.
For instance, let us suppose the below anchor tag takes the user to page two:
<a id="pageTwoAnchorTag" runat="server" href="~/Page2.aspx">Page 2</a>
you could add the below onclick event to get your confirmation when the user wants to go the page 2:
<a id="pageTwoAnchorTag" runat="server" onclick="return confirm('Are you sure you want to leave?')" href="~/Page2.aspx">Leave Records</a>
Only asking for confirmation in a couple of places might not be fully satisfying, since it will not trigger in all desired cases. For example, when you close the browser tab or window, your data will be lost.
I suggest to do the opposite: Register for the onbeforeunload as you already do, but include a "guard" which you disable on any action that should not trigger the confirmation (i.e. in postbacks):
window.shouldconfirm = true;
window.onbeforeunload = function () {
if (shouldconfirm) {
return 'Are you sure you want to leave?';
}
};
Register for the events that occur before a postback is executed (e.g. button click events, etc.) In those places, disable the confirmation:
window.shouldconfirm = false;
I am slightly surprised that the postbacks trigger the onbeforeunload event. I though to remember that on form posting the event is not triggered, and that a ASP.NET postback is implemented as a form post action.
Related
i'm using the 'beforeunload' event to detect the refresh event from the webpage.how to stop refresh the page from beforeunload event and i should not show alert message
window.addEventListener("beforeunload", this.onUnload);
onUnload = e => {
e.preventDefault();
// how to stop refresh the page from here and i should not show alert message.
//it is showing alert message. i no need to show the alert.
e.returnValue = "sure do you want to reload?";
}
It is not possible to prevent unloading a page without notifying the user.
Imagine you want to go to github.com at a time you are viewing stackoverflow.com - but it will simply prevent you from navigating away!
However, there was a time some browsers used to prevent unloading silently when you assign an empty string to the returnValue. But I believe that age of evil is gone now.
When i understand your following comment corectly, then you simply need to return zero, or false. So in your function you write:
onUnload = e => {
//e.preventDefault();
return false;
}
When i do this, i get an automated response from the Browser (for me its Chrome), if i really wanna close this website. And its in my language, so its i18n-compilant
It basically says "Are you sure you wanna refresh/close this website, data may get lost" and than 2 buttons with "Refresh/Close" and "Abort"
www.example.com/templates/create-template
I want to warn users if they leave create-template page. I mean whether they go to another page or to templates.
I use this code to warn users on a page reload and route changes should the form be dirty.
function preventPageReload() {
var warningMessage = 'Changes you made may not be saved';
if (ctrl.templateForm.$dirty && !confirm(warningMessage)) {
return false
}
}
$transitions.onStart({}, preventPageReload);
window.onbeforeunload = preventPageReload
It works as expected on a page reload and route changes if it is done by clicking on the menu or if you manually change it. However, when I click the back button, it does not fire the warning. only it does if I click the back button for the second time, reload the page, or change route manually.
I am using ui-router. When you click back button, you go from app.templates.create-template state to app.templates state.
How to warn if they press Back button?
First of all, you are using it wrong:
from https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload:
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.
and
window.onbeforeunload = funcRef
funcRef is a reference to a function or a function expression.
The function should assign a string value to the returnValue property of the Event object and return the same string.
You cannot open any dialogs in onbeforeunload.
Because you don't need a confirm dialog with onbeforeunload. The browser will do that for you if the function returns a value other than null or undefined when you try to leave the page.
Now, as long as you are on the same page, onbeforeunload will not fire because technically you are still on the same page. In that case, you will need some function that fires before the state change where you can put your confirm dialog.
How you do that depends on the router that you are using. I am using ui-router in my current project and I have that check in the uiCanExit function.
Edit:
You can keep your preventPageReload for state changes in angular. But you need a different function for when the user enters a new address or tries to leave the page via link etc.
Example:
window.onbeforeunload = function(e) {
if (ctrl.templateForm.$dirty) {
// note that most broswer will not display this message, but a builtin one instead
var message = 'You have unsaved changes. Do you really want to leave the site?';
e.returnValue = message;
return message;
}
}
However, you can use this as below:(using $transitions)
$transitions.onBefore({}, function(transition) {
return confirm("Are you sure you want to leave this page?");
});
Use $transitions.onBefore insteadof $transitions.onStart.
Hope this may help you. I haven't tested the solutions. This one also can help you.
I have a single page application written in MVC4 that uses pjax() to push html into various s in my page. I have one sub-form that allows the user to edit the data and it if the user changes the data an isDirty flag gets set in javascript to trigger an alert at the bottom of the page that there are un-saved updates. I would also like to implement an additional warning when the user tries to leave the page without saving. If I use a traditional onbeforeunload function like this
window.onbeforeunload = function() {
if (isDirty) {
return 'You have unsaved changes!';
}
return null;
};
it calls the alert if I try to close the page or navigate away from the site entirely but if the user clicks on one of my links that re-populates the with some different information it does not trigger because you are not actually leaving the page. How can I architect it so that one of these pjax() links causes an alert similar to if I close the page?
You could subscribe to a global event that fires before a pjax request:
$(document).on('pjax:beforeSend', function() {
if (isDirty) {
return confirm('You have unsaved changes! Are you sure you want to continue?');
}
return true;
});
You could add a delegated event handler onto the links in the page. You just have to make sure the handler is bound to links that may load a "new page".
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 have a master page in which leftnavigation.jsp and header.jsp are present.Now leftnavigation contains hyperlinks to few of the webpages(say general.jsp, contact.jsp).On clicking these hyperlinks , these webpages gets opened.like if i click general link, it gets opened, and if i click the link of contact.jsp , contact webpage gets opened.Now these webpages have validations on the save button at the end of the form .
Now i want to have these validation (every webpage has a validation function on save button)to work when a user clicks a link on the left navigation to change the webpage.
The leftnavigation.jsp does not contain any form element. it just contains links or scripplets
any suggestions?
Sounds simple enough. You could make the navigation bar links call the validation function for the forms when clicked. Something like this perhaps:
<a href="anotherpage.jsp" onclick="validate(); return true;>Click me!</a>
Just a warning though: it's impossible to guarantee validation in this manner, users could bypass the validation (the user could click a back button for example). If this is what you're trying to achieve, consider running a validate function onpropertychanged or onkeyup. And, as always, form validations should (almost) never be a hinderance; don't show alert messages or do anything REALLY distracting if a user doesn't type something right.
Notice how the code above would let the user change pages regardless of the form's validation status. You could make the onclick function return false if the form failed validation, but this can be bypassed, and it is a hinderance to users.
If this is really necessary, have the links work regardless, but show a small message, possibly in the form of a div quietly pop up at the top of the page warning the user that one of their form entries was incorrect.
Listen for a click event on your navigation links then run your validation function:
function listen(event, elem, func) {
if (elem.addEventListener) {
elem.addEventListener(event, func, false);
} else if (elem.attachEvent) {
elem.attachEvent('on' + event, func);
}
}
var links = document.getElementsByTagName('a');
listen('click', links, validationFunction);
If you're passing in variables, then wrap your validate function in an anonymous function:
listen('click', links, function(param) { validationFunction(param); });