Handling Re-direct in Dirty Form - javascript

On my form, a user can modify it, i.e. make it dirty, and then click the Cancel button.
The Cancel button's onClick() behavior is to change window.location.
However, when I press the "Cancel" button, I notice that the window.location only changes if I click "OK" (IE8) or "Leave this Page" (FF or Chrome). But, if I click "Cancel" (IE8) or "Stay on this Page" (FF or Chrome), then the actual window.location does not change.
How does this work?
EDIT including code:
function (buttonPressed) { // called when Cancel button is pressed
window.location = ...;
}

As #マルちゃん だよ said, you can't force a redirect if the user doesn't allow it. It just won't happen. However, the question that needs to be asked is what your "Cancel" action does, and whether you actually need to use Javascript for it.
If you want the cancel button to reset the entire form, there are ways to do that, either
Using a button with type=reset, or
Using the form.reset function
Alternatively, if cancelling is meant to take the user to a different location, then while the words may say cancel, the button is actually submitting the form and relocating them. So, make the button a type=submit, capture the fact that the form was cancelled (maybe even store it so the user can return to it later), and redirect them server side to the right page. This has the added benefit that you can track how many users are cencelling, and working when Javascript is turned off or unavailable.

What you are asking for would be a major security breach. I'm afraid you will never be able to do that.
You can, however, have control over child windows the parent has opened. Say you opened a popup with a parent window, that same parent window can have a button to close the child. Never the main window.
As for the "Cancel" event on that confirmation dialog, you could always handle it:
window.onbeforeunload = function () {
if (confirm('Are you sure you want to leave this page?')) {
return; // allow user to exit without further annoying pop-ups
} else {
// Handle the Cancel event
// ...
return "Do you really, really want to Exit?"; // Make the browser ask for confirmation again
}
}
If the user does something to leave the page, then you can tell the browser to ask them if they are sure. You cannot silently prevent them. If the user wishes to leave the page, then they can do so (dodgy sites full of adverts and/or malware would love it to be otherwise, thankfully it isn't)

Related

Make a GET/POST request inside 'onbeforeunload' function

I want to make a HTTP POST (or even GET is fine) request when the user leave the page.
I tried with 'onbeforeunload' 'unload' event listeners to watch when the users redirect to some other different page.
Is there any way I can check whether the user clicked on 'Leave' or 'Stay' button in default 'onbeforeunload' confirm box?
I want to call the function (make a request) only when he clicks the 'Leave' button.
How can I achieve this?
you can try
window.onunload
the function depends on browser
There is both window.onbeforeunload and window.onunload, which are used differently depending on the browser.Quote from here
onunload (or onbeforeunload) cannot redirect the user to another page. This is for security reasons.
If you want to show a prompt before the user leaves the page, use
onbeforeunload:
window.onbeforeunload = function(){
return 'Are you sure you want to leave?';
};
Or with jQuery:
$(window).bind('beforeunload', function(){
return 'Are you sure you want to leave?';
});
This will just ask the user if they want to leave the page or not, you cannot redirect them if they select to stay on the page. If they select to leave, the browser will go where they told it to go.
You can use onunload to do stuff before the page is unloaded, but you cannot redirect from there (Chrome 14+ blocks alerts inside onunload):
window.onunload = function() {
alert('Bye.');
}
Or with jQuery:
$(window).unload(function(){
alert('Bye.');
});
Well, this is what I did :
When user tries to leave the page - Call the API (which I wanted to call if user clicks on leave button) within onbeforeunload event listener.
If user clicks on leave button, he will be redirected to other page.
If user clicks on stay button, I have a timeout function inside onbeforeunload event listener which will be executed after certain amount of time (2 seconds) where user would stay on current page itself. [In this API I'm revoking the operations what was done by API which was called in 1st step]

Prevent user from going to other tab on website

I'm not sure how you can do this, but if a user on my site enters some information and selects another link or tab without saving, I would like to present a popup and allow them to cancel that action. If the action is canceled, I want to prevent the user from going to the selected link/tab.
Can you actually do this? I've thought about using onuload javascript event but I'm not sure how you could prevent the action.
This is a ASP.net site using jquery.
It's a rather imperfect solution, but this is as close as I could get.
Add this event handler to your page:
window.onblur = function() {
var flag = confirm("Please don't leave! Click OK if you really want to leave. I hope you click cancel and stay with me.");
if (flag) {
window.onblur = undefined;
alert("Ok you can leave now. **sob**");
//The user is leaving. You can do a little cleanup here if you need to.
}
}
Note: No solution in the world will prevent a user from opening another browser. Or, better yet, picking up their mobile phone and browsing from there. You can't force the user to remain focused on your app.
I strongly suggest you rethink your UX design if it really is so fragile that you can't allow the user to multitask.

Cancel redirect / beforeUnload

I'm using jQuery BlockUI plugin to display some nice ("Please wait...") message every time user changes URL, clicks link, is redirected, goes somewhere etc.:
$(window).on('beforeunload', function(){$.blockUI();});
Now, I'd like to enhance this message with a Cancel button, that would prevent such redirect and let user stay on current page. This leads me to a question: Is there any way in Javascript to stop URL change process, that is in progress? Or any other method/solution, that I could bind in this Cancel button's click event?
Am I trying to do something stupid or useless?
You could try e.preventDefault() or return false in the beforeunload bit but what you are wanting to do is not technically supported by browser for security reasons. Image the implications of an unclosable window...
The best thing to do is use the built in syntax. Returning a string to beforeunload pops up a dialog box asking if you are sure you want to quit, with that string as the question and the options "leave page" or "stay on page".
Example
$(window).on('beforeunload', function(){
return "Do you really want to leave this page?";
});
UPDATE
After further reading on this it turns out that major browsers support the return string syntax but Firefox does not. Firefox will simply replace your string with the line "Are you sure you want to exit this page?" or something like that.
TLDR: You can use the above return string syntax in all browsers but your custom sentence won't be shown in Firefox :)

What's window.onunload?

Im a beginner and i see that line of code a lot on javascript files , for example :
window.onunload=function(){};
when should i use this and what is it role exactly ?
thank you .
This function gets called when the user closes the browser or navigates away from the page.
https://developer.mozilla.org/en/DOM/window.onunload
You also might want to check out onbeforeunload, which allows you to prompt the user with a confirmation message before leaving the page. This can be useful for reminding the user to save their changes, or making sure the user doesn't actually want to claim their free iPad 2.
onunload is an event that is triggered when the user navigates away from your page, or when the page is "unloaded".
It's triggered when a user follows a link, or closes the tab. It's used for clean up. Like saving a user's data when they leave the page. Usually it's paired with onbeforeunload (which is called before onunload is using the same criteria) to warn a user that they have unsaved data.
if a page has an onunload handler, browsers that restore the page state (remembering changed form field values, script environment) when you navigate away and back to the page do not-
that is, they load the page as if it was the first time it was opened, with no user applied changes.

JavaScript problem toolbar=no

I have a simple logon page. When the user is validated, the window navigates to a new page. The javascript is window.open('http://www.google.com',"mytest",'toolbar=no'); My expectation is that when it navigates away from our logon page and opens the google site that the back button would be disabled. But it's not. Does anyone have any idea why?
It depends on your browser. Ultimately, all you can do with javascript's window.open() is tell the browser what you'd like it to do, but it's not obligated to do it. Browsers can and do ignore some directives based on user preferences.
I believe the option your looking for is 'location=no', as that hides the address bar and therefore the back button too. The toolbar is things like favorites/etc.
This is bad practice - what happens if the user has javascript disabled? If the browser prevents the js from removing the toolbar of the main window?
Instead, amend the logon page to detect whether the user is logged in before showing the login form. If logged in, show a message saying so instead of the form - that way, a user clicking back won't be a problem.
I find it very annoying when a website messes around with my browser window, and generally don't come back.
This is what worked for me. Instead of disabling the back key. I listen for on unload event. I then write the following in javascript:
window.onbeforeunload = function () { return "You should not press the back button while in this application. If you continue, your work will not be saved and you will need to log back in."}
Java Script pops a dialogue box with OK and Cancel options. If the user clicks cancel. The application stays right where they are. The script is embedded within the tags. For me this is the ideal solution. I found this at
http://www.hunlock.com/blogs/Mastering_The_Back_Button_With_Javascript

Categories