Oh! Dash it...

I spent half a day cursing and spewing bile at JavaScript when after all was said and done, it was doing the right thing. The ignominy of it all...My writing here is part penance for casting aspersion at JavaScript and part hoping that you don't have to go through this agony.

I have a typical Java Server Page (JSP) with its share of HTML, scriptlets (gasp) and JavaScript. Much of the HTML is neatly organized in <div> tags. The JavaScript controlled the toggling the visibility of some of the divs.

When I tested the page and invoked the script, I didn't see the expected behavior. Firebug even told me that there was an error when the JavaScript was invoked. It went so far as to tell me that

document.getElementById(a_div_id) is null

By setting breakpoints in the script I quickly determined that, not surprisingly, the variable a_div_id referred to the id of a div on the page. It was there in the code -- clear as daylight. Here is about where the JavaScript cursing began. When that didn't help -- for the record, it never has -- I pulled out my trusty JS shell tool. Still muttering under my breath "I'll show you how it's done", I pounded the command

document.getElementById("line_items").style.display = 'block';

fully expecting to see the div with id=line_items to pop up.

Nope! Nothing but silence. The next port of call was the HTML source of the page in question. Sure enough, I was able to locate the div in question. However, the syntax highlighting showed that the entire div was commented out!!!! So, my script was correct in saying that there was no such element in the document.

Turns out that culprit was the use of textual em-dashes¹ in my comments. Typically em-dashes are represented in text as two consecutive hyphens thusly

--

WYSIWYG editors (such as MS Word) are wont to convert that into a single em-dash

—

However, there is no such implicit conversion in a JSP or HTML page. So there it was smack in the middle of the comment.

<!-- This is bad news –– if you ask me. -->

It colluded with other such comments on the page to make a mess of what divs were actually there. I know HTML wonks out there are going to chime-in in unison with a "Well, D'uuuuh! Don't you know that that's improper HTML syntax". OK, for the rest of us, the Web Design group provides a pithy maxim to code by

An HTML comment begins with "<!--", ends with "-->" and does not contain "--" or ">" anywhere in the comment.

The formal definition of an HTML comment can be found at W3C.

My peeve now is that you would think that a self-respecting IDE like Eclipse² would point that out for you. Now that I think back, even a puny little editor like VIM would flag this error. Heck, Eclipse doesn't even acknowledge <!> as a valid comment. If Eclipse had shown the code correctly as being in a comment, I would not have wasted time down the JavaScript rabbit hole in the first place.

All this is coming at the end of what has been a long week of futzing with Eclipse's sloppy handling of JSPs in general. Yes, this is with an Eclipse that is souped up to use the Eclipse Web Tools Project (WTP) "goodness".

---

¹ em-dashes (—) Denotes a pause in thought, a parenthetical statement, or — more casually — an afterthought. For more on this subject, see What’s the Difference Between an Em Dash, En Dash & Hyphen?. BTW, did you know that an em-dash is called that because it is the width of a an 'm' in the current font? Useless trivia.
² For the record, I am using the latest version 3.4.x (Ganymede).