YUI Tips - Destroy!

I've been using YUI and Ajax techniques quite extensively in my latest project. Overall the YUI library is great, especially when paired with your own wrapper helper functions to show dialogs, busy prompts, etc.

One use-case that's common in my design is to use YAHOO.util.Connect to asynchronously download mixed HTML/CSS/JavaScript content and dynamically add it to the DOM. This gives a lot of flexibility and allows for very modular design as each module is a self-contained unit of logic (HMTL/JS/PHP).

Whilst this works surprisingly well in general, I have come across some peculiarities:
  • If you're dynamically retrieving a MenuBar module (markup + JS initialization), you can only insert this in a div in your DOM once. If you dump the div and try to retrieve and reinitialize the MenuBar again, it won't work. You need to hold a reference to the JS MenuBar variable in your code and call the destroy() method before dumping the div and re-initializing.
  • It's a good idea to do the same for dialogs and panels. That is, if you don't need a dialog anymore, and have no intention of caching it for further use, call destroy() when the user clicks the close or cancel buttons, or when it's job is done. This is as opposed to calling hide().
  • While the dynamic loading of HTML/JS mixed content works great in FireFox and Chrome, the behavior is a little peculiar in Internet Explorer. Two key things to get it working as expected are:
    • Use YAHOO.util.Event.onDOMReady() before initializing anything (give IE time to parse everything properly before constructing menus, dialogs, etc).
    • Divide your dynamic modules into three root elements, <style>, <script>, <div>. These should bundle all the css, layout and js logic in the module. Make sure to include them in that order however! IE does funny things when the <div> is below the <script>, even when using onDOMReady() to protect your code.
  • If dynamically loading dialogs or floating panels, especially modal ones, try and place these in a top-level div in the body element. Again, IE does some weird stuff when creating modal dialogs inside many nested divs (and dynamically generated divs). Remember also to destroy them when done.
Another interesting thing to note with this technique is that IE6 is about 10 times slower than Chrome. FireFox is pretty fast, but Chrome is blazing! Firebug is priceless though...


Popular posts from this blog

Wkhtmltopdf font and sizing issues

Import Google Contacts to Nokia PC Suite

Can't delete last blank page from Word