A Model-Glue Gotcha

I can’t imagine this isn’t a fairly well known “issue” in the Model-Glue community, but what with being new to Model-Glue, this was a new issue for me. I figure it’s worth mentioning, if only to save somebody else the several billion hours of debugging that i lost this afternoon.

Let me point out first that this isn’t a Model-Glue issue per se. It’s a combination of using Model-Glue with ColdFusion debugging and some JavaScript thrown in for good measure (some of you may already know where I’m going with this).

When you’ve got ColdFusion’s “Enable Request Debugging Output” selected on your server (which i generally do on my development box), you’ll notice that you see each individual Model-Glue view fully rendered in the debugging information.

The page that I was working on relied on some JavaScript that my company uses to do client side form field validation (among other functions). The page has a hidden div that, on failed validation, is populated with the various errors and then set to display=”block”. This is done via a fairly straightfoward document.getElementById() call to the element.

I got everything set up, submitted the form without filling in any fields, and expected that I’d see a big red box display at the top of the page.

There was no big red box.

No worries… I’ve got Firebug running, so surely I’ll be able to find the source of the problem fairly quickly. Hmm… Firebug reports no errors.

I switched over to IE, thinking that perhaps somewhere in this .js file, a non-standard method of referencing an element was being used. I wondered if it worked in IE (at this point I had already done a fair amount of debugging in Firefox, and needed to explore my options).

Big red box. w00t! Works in IE. So the culprit must be some non-standard JavaScript. So that sent me off in a flurry of debugging… in what was totally the wrong direction. Ever get so focused on thinking you’ve identified where the issue is that you end up with blinders on? You’re so laser focused on finding the issue (now that you think you’ve identified it) that you stop thinking about other possibilities. Yeah, that was me.

A few thousand hours later, I realize the JavaScript is good. It’s fairly straightforward, and I’m convinced that I’m looking in the wrong place.

To make a long story short (or at least, less long), it finally occurred to me to check for multiple instances of an element with the same id value. After all, I was plugging existing code into a framework that was using files I had built myself, so I figured it was possible that somewhere along the way, multiple files could have been included that contained an element with the id “errorBox”. I was on the right trail, but for the wrong reason. Did a quick “view source” of the rendered page, and a CTRL-F for “errorBox”. Yup. There were a few of ‘em. But not because there were elements in multiple pages with that id. Because of the rendered views in my CF debug output.

IE of course, blows dead monkeys, and rather than giving any indication that something might be amiss, decided to try its best to figure out what I meant. I don’t want my browser to do this (I wouldn’t mind if my wife tried it on occasion tho). I want my browser to say “Hey… something’s not cool here”. I love Firefox… but it also might have been nice if Firefox (via Firebug) had given me some indication that I was trying to reference a specific element by id, but multiple elements existed with that id. But at least it didn’t pretend there wasn’t a problem.

Moral of the story? Model-Glue plus JavaScript plus ColdFusion debugging could make for a volatile mix. Remember that if you have ColdFusion debugging enabled, all of your views effectively render twice (once on the page itself, and once in the debug info). This can potentially bite you in the ass when using client side scripting to reference specific elements by id.