Friday, June 08, 2007

Internet Explorer s**ks ... Javascript saves the day

Internet Explorer s**ks very badly. There are many who would agree and many who would not. I don't care as user. I don't use it. But I have to care as a developer of web application. The web application on which I am working is officially supported on Internet Explorer 6+ and Firefox 1.5+. This was the decision taken by my client and I have to make sure that there are no problems in the workflows when using any of the browser.

The background:
The web application I am developing provides management interface for a server. Recently the interface was redesigned from usability and look and feel point of view, as per comments of a professional web designer.
While making sure if it was working properly I realised that most of the workflows were not behaving as expected in Internet Explorer. I tried hard to find the pattern in misbehaviour.

The problem:
After some investigation I found that IE was submitting values of all buttons on the page to server with other form data. Due to this the server side code was not able to identify what action to carry out and it carried out the first action that it received in parameters. This is ridiculous. Also this happens when you use <button> tag and not using <input type="button"> tag. As per the HTML4.x standard created by W3C, a <button> tag is synonymous to <input type="button">. The reason I was using <button> was that I needed to show some images on buttons. This was part of the usability point of view of the redesign.

The frustration:
I spent 2 hours to find the solution for a thing that shouldn't be broken in first place.

The solution:
While searching on Google I found out that this was known bug in IE 6.x and was supposedly fixed in IE 7. Many people used different techniques to solve the problem, most of which involved use of Javascript. Finally I used a script found on one of the forums, modified it a little bit and it is now working nicely. The script disables all the buttons except the one which was clicked just before that form data is submitted.

<!--[if IE]>
<script type="text/javascript">
window.onload = function() {
 var btns = document.getElementsByTagName('button');
 for(var i=0;i < btns.length;i++) {
   if (btns[i].type == 'submit'){
    btns[i].onclick = function() {
     var btns = document.getElementsByTagName('button');
     for (var i=0;i < btns.length;i++) {
      if (btns[i].value != this.value)
       btns[i].disabled = true;
     this.innerHTML = this.className;
     return true;

Sadly IE developers for some reason choose not to follow W3C standard even though M$ is a member of W3C committee.

In other news Mark Shuttleworth asserts/confirms that Canonical/Ubuntu will not make any deal with M$ for protection against 283 unspecified patents that Linux and other Free Softwares infringe (or was it 319, does it really matter?). Good thing, at least some one is standing against the monopolistic and FUD practices by M$.


Red Soul said...

bumped into ur blog when I was trying to find information on "partner" the marathi vocal play by which artist I dont know but I loved it.. "pappa" and "partner"... shud be va.pu.kale or, not sure... I need to know if I can find "pappa" the audio play... marathi one! :)

Mark Bower said...

Not sure if you ended up with button elements or input type="button" elements, but you should be aware there is another bug with button elements in IE that will drive you nuts! They submit the wrong value!

This site describes the issue. Unfortunately there is no workaround for this. FYI.