Saturday, February 28, 2009

"Ajax calls don't render in IE"

Yesterday, one of my co-workers ran into an issue where ajax calls would simply refuse to render in IE. You could see the call returning a 200 from Fiddler, but it just wouldn't render any HTML (we were using Prototype's Ajax.Updater, btw).

It's a really puzzling bug but as it turns out, that exact same bug had happened to a different co-worker a few months ago. The ugly thing about this bug is that it only shows up when a project is rather complex (this particular one has a few dozen branches, hundreds of thousands LOCs and maybe 10 people working on it at any given time). What's worse is that as far as I know there's no one tool that will tell you what's wrong.

So I'm here to share an idea that may spare you from quite a bit of grief.

The problem turns out to happen because there are lots of reusable modules and things that include things that include things (yes, as in PHP include() or require_once()). Because of the complexity, a view with a form ended up being inadvertedly ajaxed into another form. That is obviously not valid markup, but it will still render in Firefox. The problem is that IE won't render it, and it won't throw any errors either. The W3C validator won't help much either, unless it happens to occur to you to copy and paste the full generated source from Firebug into the validator (does anyone ever do that?).

tl; dr: un-nest your forms.

No comments:

Post a Comment