Wednesday, November 19, 2008

A perfetc world.. A world without IE ??

It becomes a huge list when you pen down the IE bugs(even features), some of which you can't even dream of.
I had my share of problems struggling for hours to get things work on a buggy IE(I refer to IE6 & IE7 which makes no difference).

As I feel it probably a fitting context, I can't stop quoting this by someone on Ajaxian.
If you've been working with the Ajax framework long enough, I'm sure you've run into at least a few speed bumps thanks to Internet Explorer. Not a day goes by that I don't have to rewrite a line of code, or tweak my css in order for IE to render what I think it should. But alas, this is the nature of software that comes from a company that views Standard Compliances as recommendations."

Let me share with you a couple of issues I had to face.

Recently, in my web-page, it was needed to dynamically change the options of a SELECT box. What I was doing was construct a string with options and append the the options string to the SELECT tag using innerHTML. This worked perfectly on my favourite FF and even on Safari. I am pretty sure it would have worked on any browser, you name it, with the exception of IE.

Here is my code:
var optionString = "";
for(option in options) {
optionString += ''+data[option]+'';
var sel = Document.getElementById("mySelectBoxId");
sel.innerHTML = optionString;
What's happening in IE was, the first option tag is getting truncated and my SELECT box is shown empty.
I broke my head examining my code for a bug but found none. The mighty Google to the rescue. It was revealed that this was because of this BUG in IE.
IE recommends using DOM to achieve this and which I did to effect.

The other issue is while using AJAX. I don't call it a bug(its rather more of a feature). I have a list of items which can be re-ordered by drag-drop. Whenever an item gets dragged, I make an AJAX GEt request to the server and a re-ordered list of items had to served as response. Again this works fine with FF and Safari. The problem is with IE again.

When one of the item is dragged, IE is not always making a request to the server but the list gets re-ordered wrongly on the browser. It took me a whole day to figure out where things were going wrong.

IE is not making the request but serving a stale cached response from previous requests which are identical. Some argue that its a feature with any browser to cache a response from a GET request. But IE's caching has always been an issue.

We have two solutions for the above problem.
One by making a POST request instead of a GET so that IE won't cache it.
"But I can't convince myself to make a POST request just to satisify IE where a simple GET best fits the job. "
The other is to make your every request unique. For this you can append a random string or a timestamp as a useless parameter at the end of your request URL.
"By making requests unique, you can achieve a proper response from the server in this case, but IE still caches this response. When these requests are numerous, the browser cache overflows and you may loose some important cached response of other requests."

So, there is always a trade off involved. Its upto the developer to choose a solution that best fits his job.

The list doesn't end here. It's just that I didn't come across but others might have. I will keep adding such issues if any. I wish I don't.

Have fun with you code and don't hate it :) hate the things that don't comply to the standards..."
Now is it a fitting description to call it A perfect world.. A world without IE ??

No comments: