jQuery.datepicker – issue with duplicate ID

Posted byDavid Votrubec 12 Comments on jQuery.datepicker – issue with duplicate ID

I have discovered (minor) issue with jQuery Datepicker plugin:

It’s not actually datepicker’s fault, but it might be difficult to find it in a complex web page, so I decided to share it with you. Imagine that your application relies heavily on javascript, ajax, widgets etc… Widgets are created on the fly, and it happens is that two datepicker instances share the same ID. They might be generated from the same template (as was my case), or they dont have any ID at all, but were initaliazed in a certain way, more on this in future post.

Here is a sample code:

<div class="someWidget">
<input id="myId" class="datepicker"/>
</div>
....
<div class="someOtherWidget">
<input id="myId" class="datepicker"/>
</div>

and the javascript:

$('.datepicker').datepicker();

This will add datepickers on both input fields, and when they gain focus, widget will be displayed (that’s default behaviour). So far so good. But if you click on any date, it will be passed set in the first field and the first field only. Even if datepicker is displayed below the second field, the value will never be passed to it.

Why does this happen? Because of id. Datepicker uses it internally to know to which input field the date should be passed to.  If you don’t supply the id in html, then datepicker will come up with its own unique id. But it will never overwrite id, if it is already set.

Hope this will help someone, it took me some time to find out what was happening.

PS:

If your datepickers share same id, and one of them is hidden, you may even get this exception: “cannot set property ‘currentDay’ of undefined”. I wanted to show it in a demo, but for some reason I was not able to reproduce it, probably there was something more involved than just ids.

12 replies on “jQuery.datepicker – issue with duplicate ID”

  2. Many thanks. Didn’t think of ids and Rails just generated them duplicate. Now I care for them to be unique and all works as expected 🙂

  3. Thanks a lot, my problem was that I had a form tag and an input tag with the same ID

  4. I know it’s been a while since this post, but I wanted to thank you for posting it. I was tearing my hair out on this one until I discovered that my Add and Edit forms being created in jQueryUI Dialogs had the same ID for the date field.

    Thanks for the tip!

  6. Note that this error came up as:

    TypeError: ‘undefined’ is not an object (evaluating ‘=f.currentDay=d(“a”,e).html()’)

    …for me in Safari. Thanks for the tip!

  8. Thanks! That really saved me a lot of time!! Just curious on how you went on to debug this problem?

    1. @Chaitanya:
      Well… I don’t really remember 🙂 I use Console in Google Chrome or Firebug in Firefox…so it must have been in one of those.
      If you use Visual Studio then it is now by far the best debugging tool for MS IE. (Without it debugging MS IE sucks…)

  10. Thank you very much. You solved my problem. It is very strange.

    I have add & edit forms with same IDs for the fields. And at one point of time, only one of the forms is added to the page. The other doesn’t get added to the DOM at all. But, I see the error. After I made the IDs different, the error is gone now.

Comments are closed.