Set focus on unloading window at onunload - javascript

I have got a confirm dialog at the onunload event. It works well but there is only one problem: the window loses at onunload the focus and passes it automatically to the parent. But since there is still the confirm dialog going on I don't want to lose the focus on this window.
I have already tried to set the focus manually with window.focus() but this isn't working.
At the moment my code for the onunload event looks like this:
window.onunload = sessionConfirmation;
function sessionConfirmation(e) {
window.focus();
confirm('test');
}
Thank you in advance!

Not quite sure what your end-game is, but I'm assuming you want a confirmation dialog to show when the user tries to leave the page. If so, you want to do this instead:
window.onbeforeunload = sessionConfirmation;
function sessionConfirmation(e) {
return "test";
}
Hope that's what you were asking for!

Related

Is there a way to overwrite the refresh button action?

I would like to use some kind of preventDefault function to overwrite what hitting the refresh button on the browser does (or also pressing CTRL/CMD+R).
Is there something that allows me to prevent refreshing the page?
I tried this but it doesn't seem to do anything in Firefox.
window.onunload = function(){
alert("unload event detected!");
}
You can use onbeforeunload to prompt whether they'd like to leave:
window.onbeforeunload = function() {
return "Are you really sure?\nI don't know why anyone would want to leave my beautiful website!";
};
However, you can't override it any more than that.

Custom confirm box that has some functionality to it with window close event

I'm presently writing JavaScript, on clicking the close button in the window, I should get a confirm box. In the confirm box, I should display some message and there should be cancel and continue buttons.
On clicking cancel, the window should not be closed, but on pressing continue, the window should be redirected to another jsp.
Can someone please help me with this code? I tried using the custom confirm box, but that seems to return only a string and it cannot be used to redirect to a page.
This is impossible. You cannot redirect the user to another page when they close the window. This is for security reasons.
To display a confirm box when closing the window, you can use the onbeforeunload event. This will ask the user if they wish to leave the page or not. The confirm box is rendered by the browser, all you can customize on is the text.
$(window).bind('beforeunload', function(){
return 'Are you sure you want to leave?';
});
When the user leaves the page, you can use the onunload event, but again, you cannot redirect them (you can make an AJAX call, but you cannot redirect the browser).
$(window).bind('unload', function(){
console.log('bye'); // Some browsers may block this.
// Chrome blocks alerts in this event.
});
check this example it may help you out
function setConfirmUnload(on){
window.onbeforeunload = (on) ? unloadMessage : null;
}
function unloadMessage(){
return "Are you sure you want to leave this page";
}
setConfirmUnload(true) to enable the confirmation or false if you want to allow them to close the screen without a warning (if you have a close button for instance).
You can try also this (link : http://api.jquery.com/unload/)
$(window).unload(function(){
alert("Bye now!");
});
You need to bind a handler to the onBEFOREunload event, as none of the functionality you want will be possible with the onunload event (it is too late).
var myFunction = function () {
return "Are you sure you want to leave the page?";
};
window.onbeforeunload = myFunction;
As far as I know, there is no way to react to the user input as the confirm box is handled by the browser.

Remove focus programmatically?

I have a jquery ui dialog with tabs loaded dynamically/JSON with content. Due to the complexity, I can't really post a fiddle or a relevant code (too much code).
What's happening is that when the dialog opens, you can tab through the elements within the dialog, up to the first tab. After that, you cannot tab through to anywhere else. The focus is locked on that tab, even if you click elsewhere, that focus is locked on that tab.
I am unable to locate the actual cause of this issue.
So, how would I remove the focus programmatically?
This might help...
http://api.jquery.com/blur/
$('#tabName').blur();
Try triggering a blur event on the field you want to lose focus.
I'd put in a load of alerts to find where the JS is failing. E.g.
alert(1);
var a = 10;
alert(2);
var b = null;
alert(3);
a += 5;
alert(4);
b.hello();
alert(5);
Obviously in this example the last alert will be 4.
It is not a nice approach but everyone has to do it at some point.

What can be causing this simple focus listener to do not work?

function appFocus() {
write("FOCUSED"); // write on the screen
}
appWin.addEventListener("focus", appFocus, false);
// appWin is my window
This same code works well with other windows
other listeners works well with this window
so, why specifically the focus event does not work with just this window? Please, share your thoughts.
Found it:
I have a window with an "onload" that focus the browser within the window. By removing this onload I get the "onfocus" event to work.

Can I override onbeforeunload for a particular element?

I have a page which does quite a bit of work and I don't want the user to be able to navigate away from that page (close browser, hit back button, etc.) without getting a warning. I found that the onbeforeunload event (which I think is IE-specific, which works fine for me as the project uses lots of ActiveX) works great.
Problem is, I want the user to be able to click on a little "help" icon in the upper-right corner and pop up a help window at any time. This causes onbeforeunload to fire, even though the main window never goes anywhere and the page never unloads.
The JavaScript function that runs when the onbeforeunload event runs just puts text into event.returnValue. If I could ascertain, somehow, that the help icon is the one that was clicked then I could just not put text into event.returnValue in that situation. But how could I have the page figure that out?
Let me guess: the help "icon" is actually a link with a javascript: url? Change it to a real button, a real link, or at least put the functionality in an onclick event handler (that prevents the default behavior). Problem solved.
<!-- clicking this link will do nothing. No onbeforeunload handler triggered.
Nothing.
And you could put something in before the return false bit...
...and the onunload handler would still not get called... -->
blah1
<!-- this should also do nothing, but IE will trigger the onbeforeunload
handler -->
blah2
EDIT: My "workaround" below is complete overkill, based on my lack of understanding. Go with Shog9's answer above.
OK so while I was writing the question, I came up with a workaround which will work for now.
I put a global JavaScript variable in act as a boolean on whether or not the icon is being hovered over. Then, I attach events to the image's onmouseover and onmouseout events and write functions that will set this value. Finally, I just code in the function that handles onbeforeunload that will check this value before setting event.returnValue.
Probably not a flawless workaround but it will work for now.
on the internet you will find many people suggesting you use something like
window.onbeforeunload = null
but this does not work for me in IE6. reading up in the MSDN docs for the event object i found a reference to the event.cancelBubble property, which i thought was the solution. but thanks to Orso who pointed out that setting "event.cancelBubble=true" is useless, the way to get rid of the confirm prompt is to exclude the return statement altogether, i chose to use a boolean variable as a flag to decide whether to return something or not. in the example below i add the javascript code programattically in the code behind:
Page.ClientScript.RegisterStartupScript(typeof(String), "ConfirmClose", #" <script> window.onbeforeunload = confirmExit; function confirmExit() { if(postback == false) return ""Please don't leave this page without clicking the 'Save Changes' or 'Discard Changes' buttons.""; } </script>");
then the help button contains the following aspx markup:
OnClientClick="postback=true;return true;
this sets the 'postback' variable to true, which gets picked up in the confirmExit() function, having the effect of cancelling the event.
hope you find this useful. it is tested and works in IE6 and FF 1.5.0.2.
I have a method that is a bit clunky but it will work in most instances.
Create a "Holding" popup page containing a FRAMESET with one, 100% single FRAME and place the normal onUnload and onbeforeUnload event handlers in the HEAD.
<html>
<head>
<script language="Javascript" type="text/javascript">
window.onbeforeunload = exitCheck;
window.onunload = onCloseDoSomething;
function onCloseDoSomething()
{
alert("This is executed at unload");
}
function exitCheck(evt)
{
return "Any string here."}
</script>
</head>
<frameset rows="100%">
<FRAME name="main" src="http://www.yourDomain.com/yourActualPage.aspx">
</frameset>
<body>
</body>
</html>
Using this method you are free to use the actual page you want to see, post back and click hyperlinks without the outer frame onUnload or onbeforeUnload event being fired.
If the outer frame is refreshed or actually closed the events will fire.
Like i said, not full-proof but will get round the firing of the event on every click or postback.

Categories