Why does jQuery UI's datepicker break with a dynamic DOM?

Question

I'm working with a dynamic DOM here, and have called the jQuery UI datepicker to all inputs with a specific class name, in this case .date

It works great with the first, static, construct but when I clone it the event handlers don't seem to want to move over. I get the Firebug error:

inst is undefined

I tried looking into jQuery's new live() function but couldn't combine the two. Any ideas?

Answer 1

Ah, got it. Right after I append the HTML to the DOM I run this on all the inputs I'd like to have a datepicker pop up with. Datepicker adds a class to elements it has been attached to, so we can filter out existing inputs and only apply it to new ones.

$('.date').not('.hasDatePicker').datepicker();

I hope this helps people as I was Googling for days and didn't find anything!

You should also note that it would be faster to check for input.date in the new generated HTML by setting that as a context, rather than the whole page, as it will save time, due to this being a more efficient operation.

Answer 2

I had a similar Issue, I had multiple tables on a page and each had multiple datepickers, also on click of button "AddLine" it added a table row with dynamic HTML and datepicker.

I realized after a lot of search that my input date fields had no "id" defined they looked like this

<input type="text" class="datepicker" name="mDate1" value="" size=8 >

jquery was pointing all the date fields values to the very first date field defined on page, the calendar would popup on all the date fields but the value of 1st date field would change, I made a change to the html like this

<input type="text" class="datepicker" id="Date1" name="mDate1" value="" size=8 >

by adding a "id" and it started working, for the dynamic date fields I change the Id like this

var allColumns = $("#"+$tableId+" tr:last td"); 
        $(allColumns).each(function (i,val) {
            if($(val).find(":input").hasClass("datepicker")){
                $(val).find(":input").attr("id",newId+$(val).find(":input").attr("id"));
            }
        });

Answer 3

You need to use the 'live' event to make it work with dynamic DOM. So, if the class for your datepicker inputs is 'date-input', following code will make it work:

$(document).ready(function() {
    $('.date-input').live('click', function() {
    $(this).datepicker('destroy').datepicker({showOn:'focus'}).focus();
        });
});

Answer 4

This might be a little late, but all the suggestions above didn't work for me, I came up with an easy solution for this.

First, what is causing the problem: JQuery assign datepicker to element id. if you are cloning element, then same id might be cloned as well. which jQuery doesn't like. You might end up with either receiving null reference error or the date being assigned to first input field regardless which input field you click on.

Solution:

1) destroy datepicker 2) assign new unique ids to all input field 3) assign datepicker for each input

Make sure your input is something like this

<input type="text" name="ndate[]" id="date1" class="n1datepicker">

Before you clone, destroy datepicker

$('.n1datepicker').datepicker('destroy');

After you clone, add these lines as well

var i = 0;
$('.n1datepicker').each(function () {
    $(this).attr("id",'date' + i).datepicker();
    i++;
});

and the magic happens

Answer 5

Use

$j(id or class).removeClass('hasDatepicker').datepicker();

It is working

Answer 6

Use jQuery selectors:

$(".mydatepicker:not(.hasDatepicker)").datepicker()

Answer 7

Multiple instances of the jquery-ui library on the page will cause this error too. Removing redundant instances work for my case

Answer 8

I experienced the same symptom, in this caused by having a td containing element with the same id attribute as the input,

 <td id="fld_xyz"><input id="fld_xyz" class="date" /></td>

I know this isn't ideal anyway, but it's worth knowing that the datepicker component seems to be relying on the uniqueness of the id.

Answer 9

I had this problem. My situation ended up being I had another element with the same ID as the input with the datepicker.

Answer 10

Today I faced the same issue... I am using datetimepicker plugin in my application.
Also using jquery's default datepicker too. When ever I am invoking them both on document ready I am getting the error inst is undefined.

    $(document).ready(function(){
        $(".datepickerCustom").datetimepicker();
        $(".datepicker").datepicker();
        $("#MainForm").validationEngine('attach');
        ....
    });

So I changed the code to invoke before document ready like below:

    $(".datepickerCustom").datetimepicker();
    $(".datepicker").datepicker();
    $(document).ready(function(){
        $("#MainForm").validationEngine('attach');
        ....
    });

Now every thing is working fine. No problems.

Answer 11

I had a similar problem with data picker not working after a first call. I found an answer to my issue here:

http://www.stemkoski.com/problem-with-jquery-ui-datepicker-dynamic-dom/

I was cloning sections dynamically from template and inadvertently including the class that datepicker adds once its called:

hasDatepicker

I placed my first datepicker call after I clone the template and that did it. I then added a datepicker call after each instance of clone:

$(source).clone().appendTo(destination).find(".datepicker").datepicker();

Answer 12

After trying many of the answers here, this is what worked for me and is showing on the first click/focus

function vincularDatePickers() {
    $('.mostrar_calendario').live('click', function () {
        $(this).datepicker({ showButtonPanel: true, changeMonth: true, changeYear: true, showOn: 'focus' }).focus();
    });
}

this needs that your input have the class 'mostrar_calendario'

live is for JQuery 1.3+ for newer versions you need to adapt this to "on"

See more about the difference here http://api.jquery.com/live/

Answer 13

If it still doesn't work, it is because of the cloned id. You can completely remove datepicker like this:

$(selector).removeClass('hasDatepicker').removeAttr('id').datepicker();