I am using the onBeforeUnload event handler to confirm users before they try to leave a page with un-saved data.
For a demo of what I have done, have a look at :-
http://144.131.132.202:7777/pls/htmldb/f?p=103:1:5990655534240028758::NO:::
Thanks to Vikas Agnihotri's help on this forum I have come a long way and just need to get through these (hopefully) last couple of problems :-
There are 2 problems I am facing :-
1. Pressing CANCEL button to exit out of the current page(after making some changes) fires beforeUnload twice.
2. Pressing SAVE button to save made changes fires the beforeUnload(do you want to leave, popup), which it should not.
The explanation for this behaviour(both of them) can be found at a funny but learning article at ->
http://www.javablogs.com/ViewEntry.jspa?id=138988.
I have solved the first problem mentioned above by using the "dirty" setTimeout function method but I am still struggling with the second one.
If I make the SAVE button as a HTML button then it works fine because it uses
<input type="BUTTON" value="Save" onClick="javascript:{savePage();}">
but if it is a template button then it uses
Save and href causes the beforeunload to fire before my SAVE button(as mentioned in the article pointed above). Changing all my SAVE buttons to HTML is not an option at all.
I tried giving a button attribute of "class=t12button" to the HTML button and it does look like other template buttons but its alignment with other buttons is off and is also half the size of others.
Hopefully by now you have some idea of what I am talking about :-)
1. Do you think using the timeout trick(for CANCEL button) is the only solution I am left with, I mean it is working but can there be any implications of this solution ?
2. Can I keep using the template button and don't make the beforeUnload to fire before the SAVE button, if not, is there a way to make the HTML button appear in allignment with other buttons (DELETE,CANCEL) and be of the same size,look and feel ?
In the demo above..
The "Apply Changes Template" button uses the standard "BUTTON" template and will popup the message even when you try to save something, which is the problem here and needs fixing.
The "Apply Changes HTML" is the HTML button and works just fine but spoils the look and feel of my page.
The "Apply Changes HTML Class" is the HTML button but to try and make it look the same as the template one, I gave it button attribute of <class="t12Button"> ( I am using theme 12). As you see, it is half the size of the template button and also its top allignment is off. If I can't fix the "template buton" then I am happy to use HTML button given it looks exactly the same as "template button".
thanks for reading all of this :-)