Question

I’m experiencing an issue which has two possible solutions. I am unsure which solution is ‘more correct.’

I have a modal dialog which opens above a page. This dialog hosts an element with ID “foo”.

Now, that is not an issue at all on its own. However, the non-dialog page has multiple tabs. One of these other tabs, deep down in some content, also has an ID “foo.” This causes weird, intermittent issues depending on which “foo” is encountered first when traversing the DOM tree.

Unfortunately, both values are presenting exactly the same information in exactly the same way. The only difference is that one is being hosted inside of a dialog. The same model is being used — thus the same ID is being generated by my ViewModel.

I can do one of two things:

• Explicitly override one of these ID-creation methods to ensure that the ID generated in the dialog is unique when compared to that of the non-dialog.
• Modify my jQuery search selector to only read from the dialog’s form inward — ensuring that the dialog will not capture unexpected DOM elements.

It would seem like the second idea is a better practice. I traverse less DOM nodes and don’t have to hack anything in. However, to an unknowing developer, one could still accidentally re-introduce this issue by not starting searching from the proper area.

The same issue could be said to any developer working on our application, though. They would need to know explicitly to override the ID-creation of the ViewModel such that it does not create the same ID.

Is it ever acceptable to have repeating IDs if they’re encapsulated in different forms? Where does the expectation of an ID being unique cease to make sense?

The ID is generated through MVC’s EditorFor HTML Helper. I can override this in such a way that it generates a form-specific ID, but that was clearly not MVC’s intention.

<%= Html.EditorFor(model => model.CustomerDisplayName) %>

UPDATE: It appears I should be enforcing the IDs uniqueness. However, ASP.NET MVC3 does not seem to provide an easy way of ensuring an ID is unique to the DOM. I can append on the form’s ID, but that would generate huge IDs.. not sure if that is the best call. Any thoughts?

Answer 1

Is it ever acceptable to have repeating IDs if they’re encapsulated in
different forms?

It is never acceptable, an ID should be unique. Otherwise your document is not valid.

Where does the expectation of an ID being unique cease to make sense?

The expectation of an ID being unique never ceases to make sense. It’s part of the specs to have an unique ID per element.