Operation Aborted errors in IE

Just pushed the latest update to ReadPath and noticed that I started getting weird errors in IE. The problem actually happened in both IE6 and IE7 which made me worry a bit more than usual. I had made a couple of changes prior to this happening, so it was time to start tracking down which change caused the problem.
First off, I had been playing with YSlow and working on getting the pages optimized for speed and cacheability. I had been appending random param strings to the JS includes so that IE wouldn’t cache it. At the time it was just too much of a hassle to try and determine if the problems I was seeing were due to bad code or just old code. So now that things were settling down a bit I pulled those params out. This meant that IE would start caching JS files.
Second, I started using the YUI libraries for a lot of the UI widgets. These really make it easier to develop a web application and it’s truly amazing how well they work across all of the major browsers. Web application development has come light years from where it was just a short time ago.
With these changes, I booted up my Win2k VM with IE6 and found that I was now getting “Operation Aborted” errors in IE. The page wouldn’t load at all and there was no way to determine what was causing the problem. So off to Google I went and quickly came across this solution.

If you are using a Javascript framework like YUI, you may encounter problems with Internet Explorer 6 spews the “Operation Aborted” errors.
This error occurs because
1. IE loads the entire HTML including Javascript the first time it loads data
2. When you try to refresh the page, IE would have cached some of the Javascript files which try to execute on a HTML page which isn’t loaded fully yet
3. IE thinks its illegal to do the above operation and throws up the error.

So the solution, which YUI already recommends is to wrap your initilization code in:


This causes its own problem of course. The pages on ReadPath have a fair number of dialog boxes that are rendered by the YUI library and then hidden until they’re needed. With the new way of handling the initialization code, Firefox renders the unformatted dialogs for a brief amount of time before the page has finished loading. This causes a really ugly loading effect.
So the final solution, give all of the dialogs a class=”hiddenInitial” with that class set to display:none;. Then when the javascript gets to around rendering these dialogs, have it also pull the css class off of the divs. This way they don’t show up in IE or Firefox before they’re needed and everything works as expected.