por's Introduction
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 ) : 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 id=OpenLayers.Geometry.Polygon_77_fill unselectable="on" opacity = "13107f"></olv:fill><olv:stroke id=OpenLayers.Geometry.Polygon_77_stroke unselectable="on" opacity = "1" endcap = "round" dashstyle = "solid"></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 ) 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 ]( elem ) : 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
por's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.