IE duplicates element IDs into the Name attribute, which screwed me up!

ARGH! This one really gets me steamed. It seems that IE has decided that rather than supporting the applicable W3C and ECMA standards, they do what made sense to them. Surprised? I'm not. Anyhow, what the world ends up being stuck with is a scenario where id attributes are mirrored into an invisible name attribute for form elements. Why? So some lazy javascript developer somewhere can erroneously use getElementById('x') to access an element that has the NAME "x" but no the ID "x". I'll spare you the departure into the fact that the frigging function says ID in it and there's another one that uses NAME explicitly. Such mastery of scripting is apparently too much to ask.

That on it's own is lazy, but not terrible. However it turns terrible when you've got some code like this:

<td id="range5"><input type="text" name="range5" /></td>

Now when you submit some perfectly reasonable HTML like this to a web server with a decent browser like firefox you get only 1 element named range5 as you'd expect because you only named one element range5. Try the same with IE and what you'll end up with is a few hours of debugging and cursing the MSoft name. At the end of said debugging you'll find that since IE mirrors the ID attribute into the name attribute (invisibly) The server actually is submitted 2 elements named range5, the first of which in this case has a null value. ARRRRRGH!

So then what is the world left to do about such idiocracy (excellent movie by the by, look it up)? Well, I for one am going to dutifully note this in my "things that suck about IE to think about when coding" list that I always have running around in my head, and not name any IDs the same as NAMEs even though those are supposed to be two distinct entities with no relationship what so ever. IE sucks.

AJAX and multi-lingual apps (i18n)

I found a great list of AJAX mistakes (http://swik.net/Ajax/Ajax+Mistakes) in the course of making one. When dealing with mutli-lingual apps you need to use the UTF-8 char set as it provides umlauts and tilde's for spanish and german (just to name a few). The obvious implementation is to set this on your HTML response. The easy part to miss though is to set them in ajax as Ajax Mistakes points out:

Character Sets

One big problem with using AJAX is the lack of support for character sets. You should always set the content character set on the server-side as well as encoding any data sent by Javascript. Use ISO-8859-1 if you use plain english, or UTF-8 if you use special characters, like æ, ø and å (danish special characters) Note: it is usually a good idea to go with utf-8 nowadays as it supports many languages).

As it turned out I needed to set the content type of my response to include the UTF-8 character set like so:

response.setContentType("text/html; charset=utf-8");

Then my AJAX response came through with valid characters, yay!