Problems using YUI Panel
I use quite a few YUI panel objects as inline popups used for gathering and displaying information. Using the modal dialog option caused an IE error message: ‘A script on this page is causing Internet Explorer to run slowly …’ which caused me great worry until I discovered the cause and fix. I also had issues with KeyListener events being executed after a dialog had been closed. Finally, finding when to initialize the dialogs was a challenge.
I began getting the IE error message:
“Stop running the script? A script on this page is causing Internet
Explorer to run slowly. If it continues to run, your computer may become
unresponsive.”
Which was scary as I thought this was due to the amount of data I was loading into javscript arrays and my dynamic DOM events. The errors were continuous and appeared to occur after one or more of the YUI panels were displayed in modal mode. When I limited the amount of data being processed, the errors continued. I figured there must be something wrong with my code.
After many google searches on the error message, I found this link about a bug in the YUI panel in modal mode with complex pages:
http://sourceforge.net/tracker/index.php?func=detail&aid=1884118&group_id=165715&atid=836476
It appears that the YUI panel in modal mode is not scalable:
“The currently implementation, which attaches focus handlers (which blur) to all focus'able items on the page when modal, definitely has scalability issues.”
Thanks for letting me know guys! I just spent hours trying to figure out what was wrong with my code! It would be nice of them to put a note about this on the YUI webpage for the panel object.
The solution is to unsubscribe the listeners
dialog.showMaskEvent.unsubscribe();
dialog.hideMaskEvent.unsubscribe();
This degrades the modality a bit by still allowing the user to TAB into the page behind the mask and launch links, but they cannot click with the mouse. Good enough functionality for me.
I also had issues where events were being fired when the enter key was pressed. It seemed that the event from a closed dialog was being launched along with the currently open dialog’s key event. Unfortunately, it’s hard to pin down how this was fixed or why it was happening. I fiddled a bit and it seems fine now.
The final issue I had was when to initialize the panels. I started by using the YUI suggested method of using the YAHOO.util.Event.addListener method. The problem was that I already had a function running <body onLoad() which would sometimes call the panel routines. This would cause an error if the panel had not been initialized. I could not find any method for prioritizing when the events would run.
I finally just called the routines in my <body onLoad() routine to ensure that the panels were initialized before they were needed. This seems to work fine.