This is a simple Javascript project showing how combining OpenLayers, Prototype, Rails UJS and Internet Explorer can lead to surprising results.

Technologies:

• OpenLayers 2.11 http://openlayers.org/
• Prototype 1.7 http://www.prototypejs.org/
• Rails Prototype UJS http://github.com/rails/prototype-ujs

Steps:

• Show not working in IE.
• Start debugger in IE and add break point at 4583.

Code that breaks in prototype.js (4583): ATTR: function(elem, match){ var name = match[1], result = Expr.attrHandle[ name ] ? Expr.attrHandle name : elem[ name ] != null ? elem[ name ] : elem.getAttribute( name ), value = result + "", type = match[2], check = match[4];

So in IE elem is: "OpenLayers.Geometry.Polygon_77" VML Element: "<?xml:namespace prefix = olv ns = "urn:schemas-microsoft-com:vml" /></olv:fill></olv:stroke>"

Show it running in Firefox: elem is: "OpenLayers.Feature.Vector_78" SVG Element

Debugging in IE in Console: match[1] - type Expr.attrHandle[ name ] Expr.attrHandle name elem[ name ] elem.getAttribute( name )

Calling elem.type: IE - Failed (throws exception) Firefox/Chrome - undefined

Right way to check for null: http://weblogs.asp.net/bleroy/archive/2005/02/15/Three-common-mistakes-in-JavaScript-_2F00_-EcmaScript.aspx http://davidbcalhoun.com/2011/checking-for-undefined-null-and-empty-variables-in-javascript http://saladwithsteve.com/2008/02/javascript-undefined-vs-null.html

What does foo equal? var foo;

Null? No! Undefined.

Null checks in Javascript:

• foo.bar == null -> true
• foo.bar === null -> false
• foo.bar === undefined -> true
• typeof foo.bar -> "undefined"

But what about elem.type in IE

• elem.type == null -> exception
• elem.type === null -> exception
• elem.type === undefined -> exception
• typeof elem.type -> "unknown"

What? Unknown type - there's no such thing. There is if it's an ActiveX control: http://robertnyman.com/2005/12/21/what-is-typeof-unknown/

How to fix it?

Prototype: 4583: var name = match[1]; var result = Expr.attrHandle[ name ] ? Expr.attrHandle name : typeof elem[ name ] !== "unknown" ? elem[ name ] != null ? elem[ name ] : elem.getAttribute(name ) : "" ; var value = result + "", type = match[2], check = match[4];

But that creates a new bug at: 4915 - isXML

What's going on?

• Show in Firefox.
• Add debugging to line 4583.
• Click on polygon.
• Show that the rails.js 176 is doing findElement.

What's the fix? Well I decided to change rails.js: 5433: if (Object.isElement(element) && !element['tagUrn'] && Prototype.Selector.match(element, expression)) {

Why?

It was the only code path from rails.js: 176: event.findElement('form').store('rails:submit-button', button.name || false);

Because all ActiveX componets have a tagURN property: "urn:schemas-microsoft-com:vml" http://msdn.microsoft.com/en-us/library/ms534658(v=vs.85).aspx