technovelty

weblog of Ian Wienand

RSS  |  technovelty home  |  page of ian  |  ianw@ieee.org

IE, YUI and rendering

If you're using the Yahoo! UI Library and Internet Explorer (particularly IE7) and it randomly bails out with "operation aborted", chances are you are calling some object's render method before IE has had a chance to build the DOM (of course, every other browser seems to work fine). More annoyingly, this seems to be a race condition, so you might not always catch it.

Google suggests many things, but the only sure-fire solution appears to be waiting until the load event before trying to call render. Unfortunately, none of the sample code does this.

So, for example, to render a menu bar you would firstly create a function within your private namespace to do it, e.g.

// create a new namespace
YAHOO.namespace("mynamespace");

// create a function in our namespace to render the menu bar
YAHOO.mynamespace.onMenuBarAvailable = function() {
  var oMenuBar = new YAHOO.widget.MenuBar("render-to-this-div", { width:"100%"});
  oMenuBar.render();
}

Then register this to be run on load, e.g.

// Initialize and render the menu bar when it is available in the DOM
YAHOO.util.Event.addListener(window, "load",  YAHOO.mynamespace.onMenuBarAvailable);

This means your menu bar, if written with ul,li elements might flash up as a list before it is re-drawn as the menu-bar you expect; but this is better than the browser crashing.

posted at: Sat, 25 Nov 2006 16:20 | in /code/web | permalink | add comment (6 others)

Posted by Murali at Wed Feb 28 19:22:53 2007

Thanks it works

Posted by Rob at Mon Apr 9 03:03:37 2007

Thanks!  I searched quite a bit to find a fix for this problem and am glad someone figured it out.

Posted by sayeed at Mon May 28 13:09:45 2007

thanks for the article

Posted by Brian at Sat Jun 9 01:41:40 2007

Many thanks. This was driving me crazy until I found your solution. Would you consider submitting this to the YUI team so they can either document it or work around it?

Posted by WyMan at Wed Aug 8 04:58:32 2007

Great tip, absolutely works, Thank-you

Posted by Oliver at Tue Sep 18 07:46:07 2007

Hi,

Thanks for this. This is a great advice and it works. However when I try to call the object and use the show() method in my case using another function, IE6 tells me the object doesn't support the method or property. Any idea why?

Add a comment
*Name
*Email (not shown)
Website
*Comment:
*Word above?
* denotes required field

Creative Commons License
This work is licensed under a Creative Commons Attribution-ShareAlike 2.5 License.