Operation aborted error message in IE while using jQuery's BlockUI plugin

Recently we had this nagging issue with MS Internet Explorer 7 – On opening a page we would get an “Operation Aborted” alert message followed by a page not found error.

We had implemented TONS of jQuery function & plugins on the page and after painfully commenting and isolating each one, we found the culprit – a BlockUI function call! (or at least that’s what we thought).

When the page was loading, we were calling a Ajax method which was supposed to populate the page with some data. During the call we used BlockUI’s block page function to display a loading message to the user.

$.blockUI({
    message: '<h1><img src="busy.gif" /> Loading data...</h1>'
});

It was this call which caused IE to spurt operation aborted error.

On further investigation we found that it was an issue with IE. In fact IE versions –

• Microsoft Internet Explorer 5.5
• Microsoft Internet Explorer 6.0
• Windows Internet Explorer 7

In fact, one solution suggested by MS KB was – Upgrade to MS Internet Explorer 8!!

Fortunately, another KB had more information about this error –

To quote Microsoft –

This problem occurs because a child container HTML element contains script that tries to modify the parent container element of the child container. The script tries to modify the parent container element by using either the innerHTML method or the appendChild method.

Source –
http://support.microsoft.com/default.aspx/kb/927917

This error was caused because we tried to modify a DOM element before the DOM was completely loaded. We could have avoided this by adding our code snippet inside $(document).ready() but that was not possible. So we took another approach.

Instead of blocking the entire page, we wrapped our page content section inside a DIV. And after we added our BlockUI function call. So modifying our earlier script –

$("#DivName").block({
    message: '<h1><img src="busy.gif" /> Loading data...</h1>'
});

This fixed operation aborted error!