Error: Unknown runtime error

There is a long list of tools and technologies that are web1.0 or that can be categorized as web2.0. Apparently, Microsoft's Internet Explorer (including Version 7) should be categorized as web1.0 - it still is not capable to handle standard (X)HTML code with Javascript components the AJAX way. This came (once again) to my attention, while I finalized the web-page for the ReScope experiment. I stumbled just over another issue with the Microsoft product, that resulted in the error message of the title of this article. "Unknown runtime errors" are certainly the most difficult to debug because there are no clues about the error. So I spend 6 hours of trial and error to find a problem, which appeared first to be a MooTools bug. In the end, however, it turned out that the Internet Explorer (Version 7!) gets confused with id and name attributes.

I created a little web-page for the user management that comes with a bunch of forms and some fields that are dynamically filled from the data delivered by a user-profile service. On start-up the page displays the users their personal information that the system receives from the service. The forms are basically for registering and manipulating the personal information.

HTML considers the name-attributes for input fields relative to the form, in Javascript you can access this data by requesting the form and then directly manipulate the values of the input fields. This is not a problem and works fine for ages with all browsers.

In my case, I have a separate section in the (X)HTML that simply shows the personal information. This section contains a set of dynamically filled DIV/SPAN tags. As it not possible to access these fields like form fields, one needs to give each tag an id that is unique in the entire document. These identifiers are stored in the id-attribute. Of course this is not new - and well documented in the HTML, XML, and DOM specifications of the W3C.

For the display section I simply applied this ID handling, all with unique identifiers - and it works nicely with mozilla and web-kit based browsers. With Internet Explorer again it does not work - even not in standard compliant mode, which I use all the time. After debugging for hours I figured out that Internet Explorer does not only require the identifiers in the id-attributes to be unique with respect to all other IDs in the document, but also with regard to the names that are used for input fields in forms. Otherwise, the DOM function getElementById() gets confused.

And after all, it turned out that the getElementById() function caused all the debugging pain. So, Internet Explorer does not only mixes up name and id attribute information in a HTML document, but also makes the browser completely standards in-compliant: instead of returning the first element with the given ID that the run time engine finds or - as DOM prefers - to return an undefined value (in JavaScript jargon 'null'), the Microsoft product returns some random garbage, that behaves almost like a DOM element, but anytime you try to investigate the object with debugging techniques the browser responds with 'unknown runtime error'.

The solution to this problem is simple, but if you follow the specifications it is not obvious: if you use forms and display fields with id-attributes in a single HTML document, which you intend to manipulate with Javascript code in the Internet Explorer, make sure that your IDs are unique with respect to the names and all other IDs.