Friday, July 1, 2011

ExtJS -=- Error: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)


If you are developing an application using the technologies mentioned in the title and have come across the operation aborted error in internet explorer ( then continue reading

Unlike Firefox and Safari - Internet explorer requires the DOM to be fully loaded before it can provide a peaceful execution of ExtJS code - you will face operation aborted errors otherwise.

Consider the following scenario

I declare a DIV container for an ExtJS based tab panel and immediately afterwards provide the required code.

..... ..... .....

Assuming more HTML markup follows after , this code will produce random operation aborted errors in internet explorer 6 and up. Sometimes it will load just fine while other times it will err out while you being able to see your page rendered - you will be unable to interact with the page and will be redirected to the default error page once you will click the ok button on the popup dialog box.

This error is not specific to ExtJS - this is a general bug with internet explorer and will occur whenever a DOM node is tried to be manipulated before the whole DOM structure has been read in by the browser. For example you will also face this issue with google-web-toolkit.

You can fix this issue by using the following approach

Leave all your containers where they are

Move all your javascript/ExtJs/GWT code just before then end of BODY tag.

Ideally you should consider moving all your code into JS files to speed up page loads due to caches.

No comments:

Post a Comment