I really hate Internet Explorer. It is mind boggling that a company as large as microsoft cant build a browser better than Firefox. I just wasted about 3 hours of my Sunday chasing IE bugs... Most of these problems where CSS problems on prior versions of IE (Internet Explorer), as of the writing of this article the current version of IE is 8. Todays rant is about how IE8 handles javascripting and ajax.

Hopefully this post will help you avoid losing hours of youf life chasing IE ajax bugs like i did today. The last bug mentioned took me forever to figure out and left me dumbfounded.  I could not believe that something so simple could cause IE to break.  

No Trim Support

For some reason, the javacript engine in IE wont support a call to trim(). So if your trying to clean your form data by doing something like

var fooBar = document.getElementByID('foo').value.trim();

you are going to get js errors in IE. This seems to work fine in other browsers, i guess the good folks at Microsoft thought that this function is not needed or not useful... FACEPALM!!! Instead you can use the jquery version of trim.

Hiding or disabling your submit button on a form post stops the post.

Because i know some users like to pound a form button till they see something happen, i often will try and disable the button on click... I have never had a problem with this till my current project. On previous projects i have been using an ajax post to servlet to push data to my servers backend (i hate page refreshes). My current project is using java beans to submit some data to a payment gateway, i wanted to make it a s simple as possible so decided to do a traditional jsp to jsp form post. Well it turns out that IE does not like you using a disable() or hide() function on a submit button (it does not blow up on other elements). Other browsers have no problem with this but IE is different once again. My fix for this was to use jquery to bounce the button off the the farthest regions of the galaxy like this:

	function finalSubmit(){
		$( '#ajax_final_submit' ).css("position", "absolute");
		$( '#ajax_final_submit' ).css("top", "-10000px");
		$( '#ajax_final_submit' ).css("left", "-10000px");
	}

This code seems to work on IE and gets the job done.

I am not a .net programmer but it seems to me that IE fails across the board on everything i try to do. It is very frustrating.