Problems using YUI Panel

jjunkin — Fri, 28 Mar 2008 20:11:55 +0000

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

I finally just called the routines in my

Strange server errors posting an Ajax form

jjunkin — Wed, 26 Mar 2008 21:50:25 +0000

I just wrestled with getting a form to post via ajax. I have done this before but had a bunch of issues crop up this time including strange intermitten server errors that only seemed to occur on Firefox. I resolved it by using the extremely handy YUI connection manager ’setForm’ function to process the data for me. I also found a problem when submitting a non-rails created form that caused an ctionController::InvalidAuthenticityToken error.

I was sending the form by using a javascript function to get each field, concatonate a url (using escape) and use the YUI connection manager with a GET method. This caused intermitten errors on firefox including one like ‘the server did not understand the request’ (or something like that). What was happening was the escape was creating a series of chars that triggered a mod_security rule. The rule was blocking access to the rails server.

ModSecurity: Access denied with code 400 (phase 2). Pattern match "%0[ad]" at REQUEST_URI. [id "950910"] [msg "HTTP Response Splitting Attack. Matched signature <%0a>"] [severity "ALERT"] [hostname "dev.removed.com"] [uri "/aSubmitContact?name=john%20johnson&email=john@removed.com&phone=123455&msg=this%20is%20a%20test%0Athsi%20is%20only%20a%20test&subject=general"]

I did some digging and discovered that YUI has a sweet function to fetch, prepare and send the form fields for me:

Connection Manager can automatically harvest HTML form data and prepare it for either a GET or POST request via the setForm method. When you call this method before initiating the transaction, Connection Manager constructs a GET querystring or a POST message from the form and submits it to the specified URL.

You simply hand the element to YAHOO.util.Connect.setForm(formObject, true); and the connection manager takes care of the rest. SWEET!

After that, another issue came up with rails. It seems that rails expects you to utilize it’s built-in form generator. When I submitted the form I built with javascript using the DOM, I got the error:

ActionController::InvalidAuthenticityToken

This appears to be due to a new feature in rails that attempts to stop cross-site-scripting by attaching an hidden identifier value to the form. I had to disable the feature for my javascript created form. To disable it I used:
protect_from_forgery nly => [:update, :delete, :create].
I realize that it is a nice feature, but it would be nice to see it as optional instead of default.

Joe Junkin » Ajax

Problems using YUI Panel

Strange server errors posting an Ajax form