jQuery-ui tabs: interference between tabs

Question

I use the jQuery-ui tabs widget as a navigation. Contents of all tabs are load via ajax. Seems that there is interference between tabs. I mean, for example, if in page1 in tab1, there is an element whose ID is foo, and in page2 in tab2, there is an element with the same ID. And in both page, there is javascript code to manipulate the element with ID foo, then weird things will happen.

How to deal with this situation?

Answer 1

Seeing as you are using jquery, you can target the correct element by using selectors based on your tab name.

e.g. if you markup looks like this:

<div id="tabs">
  <div id="tabs-1">
    <a href="#" id="linkId">blah</a>
  </div>
  <div id="tabs-2">
    <a href="#" id="linkId">blah</a>
  </div>
</div>

you can specifically select the second link with this selector, despite the id duplication:

$("#tabs-2 #linkId").whatever();

Answer 2

You deal with it by having unique IDs - that is, after all the point of IDs. :) As far as jQuery selectors are concerned, yes, you can clarify which of the elements you mean as Bayard Randel explains, but it's a dangerous practice in general. I've found from personal experience that it comes back to bite you in the end - somewhere, somehow, you'll forget that you've got duplicate IDs. Just avoid them.