I'm currently working on a project where different areas of the user
interface (an AJAX-loaded "Service") are intended to be re-usable,
potentially with more than one "instance" of a given Service on a
page. The issue I'm running into, and am asking for some input on, is
the following:
When I load one instance of a Service into the page, there are DOM IDs
on a number of tags. That's easy enough. I can hook them with jQuery
all day long and everything is peachy. However, when I load a second,
duplicate Service on the page into another area, the DOM IDs of the
two Services collide.
I can still hook elements with jQuery by being more specific $("#area1
#service") and $("#area2 #service"), but I realize this isn't valid
HTML. I can't think of another solution, though. Is there any way to
have a significant amount of content on a page that overlaps, but not
have their IDs collide, yet still offer "clean" CSS selectors and DOM
references for jQuery? The Services also bring in their own
JavaScript, which is why each instance needs to be able to reference
itself, without getting only the first occurrence of an ID that exists
on a page.
I hope I'm being specific enough... If not, I can surely provide a
small example.
Thanks once again!
