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:

  1. Hi, Howard!

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

    ReplyDelete
  2. 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?

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

    ReplyDelete
  4. 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...

    ReplyDelete

Please note that this is not a support forum for Tapestry. Requests for help will be deleted. Please subscribe to the Tapestry user mailing list if you are in need of support, or contact me directly for professional (for pay) support.

Spammers: Don't bother. I delete your comments and it's a waste of time for both of us. 垃圾邮件发送者:不要打扰。我删除您的评论和它的时间对我们双方的浪费