Develop Reference

Different actions with onbeforeunload

I am working on a simple chat script using Ajax and want to indicate when a user leaves the page. Have read several docs and found this works:
window.onbeforeunload = leaveChat;
function leaveChat(){
... my code
return 'Dont go...';
}
Unfortunately (and logically), if they cancel the exit, my code is still executed and they are flagged as leaving even though they are still on the page? It should only execute if the confirm leaving the page. Any suggestions?
I would use onunload, but it doesn't seem to work in any of my browsers (Chrome, IE).

First, you should add the event handler using:
window.addEventListener('beforeunload', function() {
// Confirmation code here
});
window.addEventListener('unload', function() {
// fire pixel tag to exit chat on server here
// UI interactions are not possible in this event
});
For further research:
unload event reference
beforeunload event reference
Window.onunload reference

Issues with "load" event handler in Firefox Extension Developement

I'm writing a Firefox extension, but have issues with user interaction because of getting the right events properly. My extension shall complete the following tasks:
check the currently viewed browser tab on certain structures
do some backend server calls
open dialog
redirecting the user to a landing page
So far so good, it works. I start the sequence with the following eventHandler:
window.gBrowser.selectedTab.addEventListener("load",function(){ Fabogore.Load();},true);
after opening the dialog, I try to remove the EventHandler from within the Dialog:
window.opener.gBrowser.selectedTab.removeEventListener("load",function(){Fabogore.Load();},true);
But the sequence gets triggered again and again, the eventlistener fetches every load event of every single tab, although i used the selectedTab? So the Dialog pops up again and again. I've also tried closing the event Handler in the original Javascript.
Any guesses?

This is easily explained - the function you add as a listener and the function you remove are different. Try running this code:
alert(function(){ Fabogore.Load();} == function(){ Fabogore.Load();});
This will show you false, each time you define a function in your code a new function is created. To solve your problem you need to define one function, store the reference to it and use it both to add and remove the listener:
var listener = function(){ Fabogore.Load();};
var listenerTab = window.gBrowser.selectedTab;
listenerTab.addEventListener("load", listener, true);
[...]
listenerTab.removeEventListener("load", listener, true);
Note that I also stored the value of window.gBrowser.selectedTab in a variable - by the time you decide to remove your listener the selected tab might change already. You want to remove the listener from the tab you added it on and not some other tab.

Why don't multiple Titanium.App.fireEvent() calls work in Android from Titanium Appcelerator?

In Titanium Appcelerator, I have a project that creates a tabGroup and window via a function.
Ti.App.addEventListener('startCoSelect', function(e) {
// store user name and password globally
// user = e.user;
// pass = e.pass;
tabs.close();
tabs = tms.ui.createCoSelectGroup();
tabs.open();
});
Ti.App.addEventListener('startAppHome', function(e) {
tabs.close();
tabs = tms.ui.createApplicationTabGroup();
tabs.open();
});
var tabs = tms.security.getPermission();
tabs.open();
Within this function is a button, this button has an event listener assigned to it that then calls Ti.App.fireEvent('startCoSelect').
btnLogin.addEventListener("click", function (e) {
Ti.App.fireEvent('startCoSelect');
});
From this event listener a function is called that opens a new tabGroup and window as well as closing the previous tab group as shown above. Inside of the tabGroup created by tms.ui.createCoSelectGroup() is another eventlistener that fires another event
btnSelect.addEventListener("click", function (e) {
Ti.App.fireEvent('startAppHome');
});
and once again another event listener and fireEvent call within the tms.ui.createApplicationTabGroup() function.
I am developing and testing all code within Titanium Studio with Titanium sdk 1.7 using the continuous/nightly builds of both on Mac OS X 10 as well as a completely updated Android and iOS sdk.
My issue is only within Android. The mobile app works perfectly as it should on iPhone. However, on Android (testing with 2.2 API's emulator) I can only fire one event. As an example, the android application will accept the first button "click" event fine and fire the event but then the next fireEvent call (activated by the next button press) will not fire.
I know that the "click" event is firing, by placing an alert inside of each Event Listener, and that it has to be the fireEvent call.
I also know that it doesn't have anything to do with the order of the calls. If I change which event is fired first it will always fire the first one and it will always refuse the fireEvent calls that follow. An example being that I changed which tabGroup and window was opened at launch and the first button click and fireEvent work then afterwards, even though the next click events are registered, the fireEvent call is not.
The Trace and console give no answers or error codes and I am left with only a button that does nothing unless I place an alert or function inside. I have tried having the function call Ti.App.fireEvent() and it doesn't change.
I may be able to post code via pastie but I need to remove crucial information before posting it so it may take a day.
All help is appreciated.

How to attach events on window.opener

I have a window that is opened by
var myWindow = window.open(
'popupManager.htm',
'myWindow',
'status=0,toolbar=0,width=500,height=100');
and it will act as a debug window.
inside I want to hook up to windows events on the window.opener and I'm not getting this to work. Both URL's are in the same domain/same website.
I can hook up to DOM elements fine using, for example
$("input[soid=DlgButtonBar_cancelButton]", window.opener.document).bind("click", function() {
alert('Cancel button was pressed!');
window.close();
});
but I want to hook up to the move event (window.onMove) and close event.
tried
window.opener.addEventListener('move', function() { console.log('moving...'); });
with no luck.
what is the trick? using jQuery or simple javascript...

Listening on window events doesn't seem to work. I use this trick to listen to window events (unload in my case):
Create a document element (e.g. span) on the parent document (e.g. the one you want to get events from) :
var $unloader = $('<span style="display:none;" id="unloader"></span>');
$('body').prepend($unloader');
$(window).unload(function(){$('#unloader').click();});
In the opened document (e.g. popout), you can listen to the unload event now masked as a click event:
$("#unloader",window.opener.document).click(unloadEventHandler);
If you need to detect if the unload is a close or a navigation event, you can check the closed property for the parent after a delay:
window.setTimeout(function(){
if(window.opener.closed == true) {
// Close event
} else {
// Navigation event
// window.opener.location to get new location
}
},500);
The risk is in the delay, the closed property is changed after the unload methods and event hooks are executed so if the delay is too short you might get the flag before it is changed and if it's too long, you get unnecessary delays.
I think the move event can be handled similarly, hope this helps. Let me know if there are any possible improvements to this method. Thanks and good luck.

How many times is onunload triggered?

I have just been helped on a problem I have here.
var win = window.open(url, name);
win.onunload = StartLoad;
win.close();
To solve this problem completely, I wanted to know if onunload will be triggered once or every time a event occurs?
In other words, will my function startLoad run every time the child window "win" gets redirected, closed etc? Or will it do this event once and that's it?
Apologies, if this is a silly question.
Thanks all

No - this method can fire multiple times as you navigate off a page in IE6 and IE7.
This code snippet illustrates this (save as OnUnloadTest.htm):
<body>
<form id="form" action="OnUnloadTest.htm" method="post">
Click here
</form>
<script type="text/javascript">
window.onbeforeunload = beforeunload
function beforeunload() {
alert('OnUnload');
}
</script>
</body>
Basically, the event fires once for the actual anchor click, and once as the page actually posts back. I've only seen this issue when you have javascript in the href of the anchor, although if you use ASP.NET linkbuttons then be warned as this puts javascript in the href.
For most other sorts of navigation (e.g. user clicks a normal anchor, or closes the browser, or navigates away with a bookmark, etc) the event does only fire once.

It should only fire once, the first time the window unloads. Anything else would be a security hole.

If you want to make sure that your event handler only runs once you can have the handler unbind itself the first time it is invoked. This will guarantee that the callback does not run more than once:
var win = window.open(url, name);
win.onunload = function(event) {
win.onunload = function() {}; // assign a noop
return Startload.call(this, event);
};
win.close();
Some JavaScript libraries have a built-in helper for binding an event handler that you only want run once. For example, jQuery has a one() method for this purpose:
var win = window.open(url, name);
$(win).one('unload', Startload);
win.close();

Read WebKit Page Cache II – The unload Event for interesting discussion on how unload event plays with page caching feature of modern browsers.