Question

Is it ok to have multiple dom elements with the same id on a page, if those elements are only ever contained in various, identical jQuery UI dialogs? For example:

    <div id="tabInfo" class="tabDiv">
        <ul>
            <li><a href="#tabs-info">Book Info</a></li>
            <li><a href="#tabs-reviews">Reviews</a></li>
            <li><a href="#tabs-subjects">Related Subjects</a></li>
            <li><a href="#tabs-alsoByAuthor">Also by Author</a></li>
        </ul>
        <div id="tabs-info">
        ...

The tabInfo div is turned into a tab control, and inserted into a dialog. But I can have multiple dialogs open at once, all drawing from this code. As a result, I could have multiple divs on my page with the id tabInfo, tabs-info, tabs-reviews, etc.

This all seems to work fine. My question is, is jQuery UI coded to handle this situation, or is there a better way to do this?

Answer 1

No. Id’s need to be 100% unique to the page, that is the nature of Id’s. If you need multiples then use a class instead of an Id or generate your ids dynamically like tabInfo_1, tabInfo_2 etc.

I dont know that having non-unique Id’s would break your code, but it shouldnt be a question in the first place because according to the standard they need to be unique.

http://www.w3.org/TR/html4/struct/global.html#adef-id