MVC3 - jQuery datepicker when multiple elements have the same ID

StackOverflow https://stackoverflow.com/questions/8043241

Question

I have a weird situation (don't we all?) with datepickers and want to get some advice.

I have a screen with a list of Locations, and for each Location, they can click Edit and edit that location. The Edit displays below the Edit link, and they can edit multiple locations at one time. This means the same View is rendered on the screen multiple times, and therefore multiple fields will exist with the same id (editing 4 locations will result in 4 "DateOpened" fields).

So, when I load my View, javascript adds datepickers to any fields that need it like so:

$(document).ready(function () {
    var elements = $(".NeedsDatePicker > td > input");
    $(".NeedsDatePicker > td > input").datepicker();
    $(".NeedsDatePicker").removeClass("NeedsDatePicker");
});

Works fine, but, as you've probably already figured out, when I click a date on the calender, it populates the first "DateOpened" field when multiple Edit windows are open.

Is there a way to tell the datepicker to use the field WITHIN a certain parent, like you can for general jQuery selects?

$("#DateOpened", "Location-134").doWhatever...

...or is there a way to give the fields different id's without breaking MVC's UpdateModel() function? Or any other advice?

Était-ce utile?

La solution

You should definitely keep IDs unique within an HTML DOM. Most, if not all, DOM manipulation libraries/frameworks, including jQuery, have this assumption built-in.

There are a few questions on SO WRT to avoid the same IDs in the form:

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top