Of IE8, NodeList, Array and forEach

Last week I happily pushed a new release of our system live, only to get a customer complaint near the end of the week that he was getting an “error”.  Fortunately he was bright enough to send screenshots when I asked for more detail, which told me he was on IE8 and the page was not laying out correctly.  Clearly some javascript was breaking in the layout calculations of my page.

I had based our site on the sandbox: http://dojo-sandbox.net/public/3a122/4

That code works beautifully in Chrome, Firefox 4 and IE9.  It falls over horribly in IE8, with the infamous “Object does not support this property or method” error message at an unknown line of code.  As it turns out, the error was in the chained method call:

this.getChildren().forEach(function(d) {

The ‘getChildren()’ function, defined in _WidgetBase (in dojo 1.6.1), uses the dijit.findWidgets() function, defined in dijit/_base/manager.js, which builds a plain Javascript Array for return.  It is not a NodeList, as I had thought, which provides its own forEach function, but a Javascript Array object, which may or may not have a forEach function, depending on the version of Javascript implemented in your browser.  It is for exactly this reason that dojo.forEach exists.

So, the solution? Don’t call forEach directly on Array objects: http://dojo-sandbox.net/public/3a122/7.

dojo.forEach(this.getChildren(), function(d) {

Don’t presume dojo functions return NodeLists just because they seem to behave like one, and don’t assume that your Javascript will work on “all good browsers” because many aren’t what you consider to be good.

And do, always and imperatively, test your code on as many browsers as you can find, because users are a varied bunch and someone, somewhere, will break your code by simply doing what they do every day.

Share and Enjoy

This entry was posted in Dojo. Bookmark the permalink.

One Response to Of IE8, NodeList, Array and forEach

  1. Arcelia says:

    Came to yuor web blog through Bing. You already know I am signing up to your feed.

Leave a Reply

Your email address will not be published. Required fields are marked *