Tapestry Training -- From The Source

Let me help you get your team up to speed in Tapestry ... fast. Visit howardlewisship.com for details on training, mentoring and support!

Friday, August 29, 2008

Id conflict inside Web Browser

Just spent many minutes on a wild goose chase and the underlying cause was that I had a <div> and a <textarea> that shared the same id. $(id) returned the <div>, most likely because it occured first in the document. I then got an error because <div> doesn't response to activate() ... that's a Prototype method attached to form elements.

I would be tempted to make Tapestry enforce this (that the id attribute for any node was unique), but that won't proof it against partial renders under Ajax, so I don't know that there's any point.

What's really going on is that CSS rules based on element id rather than element class are evil, and should only be used as a last resort. The free CSS template I got off the web uses too many explicit ids where it could be using CSS classes. You get what you pay for.

4 comments:

Thiago H. de Paula Figueiredo said...

Hi, Howard!

I prefer to have some tag id (not checking tags created via AJAX) than checking no checking at all.

Craig St. Jean said...

Or maybe for debugging, use a param to the servlet that enables ID checking for development (maybe give the option of outputting via logger, or throwing an exception on those pages).

If not, maybe some javascript library that can be run on page load and after ajax calls in development that alerts the user?

Noel Grandin said...

A compile-time check doesn't have to find 100% of the errors in order to be valuable....

Unknown said...

The way Tapestry 4.1 generates ids and names for elements is very valuable. It is not 100% fault proof but helps you avoid many errors. I then use expension with ${myComp.id} in my javascript code to get the component or element id. It even corrects mistake on partial renders....
You should check with Jesse the implementation of ajax, I think he made a brillant job with Tap4.1. What's missing also is that you rely completely on prototype. Prototype is cool for quick js development, but if you intend to develop some components then there are better frameworks out there. You should make tapestry JS library independent with the ability to plug in different JS libraries. There should be a tapestry.js with all the methods and events listener/register needed. And one implements this file with the JS library of its choice.

And also all css should be set with class and never element id...