For our Episodic Video Publishing Web Application we have a number of pages that include a form.  If the user tries to navigate from a form that has unsaved changes then we want to prompt the user that they have unsaved changes and that these changes will be lost if they navigate away.  There are various ways that you can detect if the user has modified the page’s form but the easiest I’ve found is to make use of Form.toQueryString.

First, create a function that stores the form state in a hidden input.

getOrCreateInitialFormState: function(form) {
var formInitialState = null;,
var formInitialState = $('form_initial_state');
if (!formInitialState)
formInitialState = new Element('input', {
id: 'form_initial_state',
type: 'hidden',
value: form.toQueryString()
}).inject(form, 'before');
return formInitialState;
}

So when the page loads record the current form state and hook into the click event for any links on your page and check if the form state has changed.

window.addEvent('domready', function()
{
// Grab the form
var form = $('my_form');

// Capture any clicks that would cause the user to navigate away
$$('a').addEvent('click', function(e) {
if (form.toQueryString() != getOrCreateInitialFormState(form) {
e.stop();
var result = confirm('You have unsaved changes.' +
' Are you sure you want to navigate away from this page?');
if (result == true) {
// The user wants to navigate
window.location.href = a.get('href');
}
}
});
});


That’s it!

So I RDC’d to our one Windows box and, uh oh, it don’t look so good and there are a bunch of JS errors.  Here were a few of the main problems that I had to solve for IE.

Trailing Commas

IE does not like trailing commas in things like object declarations.  For example, you will get a very general JS error that points to a line that has nothing to do with the problem if you have the following:

var myObject = {
foo: 'bar',
baz: anotherObject,
};

Positioning and Z-Index

Our site has a lot of fancy drop-down menus.  The menu is absolutely positioned within some relatively positioned element and then given a z-index so that it appears overtop of other elements on the page.  However, this was a problem on IE when I noticed that my menu would actually appear behind some elements on the page.  In particular, the menu would appear behind other elements that have “position:relative”.

This took a while for me to figure out.  Eventually it came down to this: If an absolutely positioned element has a z-index then it’s containing relatively positioned element must specify a z-index (z-index:1) in order for the absolutely positioned element to be able to appear on top of other relatively positioned elements.

I did not come up with this on my own but it did take me a while to find this excellent page called “Z-Indexing with position relative and absolute“.

Mootools Events Targets

I LOVE Mootools.  Eventually I will do another post about some Mootools tricks I have picked up but for now I’ll stay within the context of this post.  I have a lot of JS code that looks like the following:

someElement.addEvent('click', function(event) {
if (event.target.get('tag') == 'li'
event.target.dispose();
});

However, the Mootools documentation says that the event target, is not extended with $ for performance reasons (which actually only seems to be true in IE and would result in JS errors).  Therefore, the above case should be written as:

someElement.addEvent('click', function(event) {
if ($(event.target).get('tag') == 'li'
$(event.target).dispose();
});

To avoid writing code like this everywhere I extended the Event class as follows:

Event.implement({
getTarget: function() {
if (!this.extendedTarget)
this.extendedTarget = $(this.target);
return this.extendedTarget;
});

This left me with:

someElement.addEvent('click', function(event) {
if (event.getTarget().get('tag') == 'li'
event.getTarget().dispose();
});