CODEWITHSUNDEEP
javascriptjqueryhtmljquery-uidatepicker
CJLopez
CJLopez

Reputation: 5815

datepicker added dynamically won't work

I have detected a problem with datepicker. I'm adding controls dinamically, and one of them is a datepicker, along side a couple of selects and a textarea.

Well, whenever i add a datepicker, lets say i have 3 datepickers, i set the date of the first, then i try to set the date of either the second or third, well, my problem is that setting the date of the second or third sets it to the first one

Refer to this fiddle to see the problem reproduced. Just add 2 or 3 datepicker clicking the add button and try to set the dates. Any idea on why is this and how can it be solved will be pretty much appreciated

Upvotes: 1

Views: 99

Answers (3)

silkfire
silkfire

Reputation: 25945

When you're cloning, all your elements retain the same ID. In a given DOM structure, only one (1) element can have a specific ID at any given time. So give your list items a class or an ID ending with a serial instead, in order to avoid this problem in the future.

var li = $('<li class="dateLi"><input type="text" /></li>');

See this updated jsfiddle.

Upvotes: 2

Tariq
Tariq

Reputation: 2871

that's because you have to change the id of each input and li.
try this:

jsfiddle.net/LgRR7/

Upvotes: 1

e.marten
e.marten

Reputation: 380

That's because you are using the same ID when you clone the element, if you are using the same ID there is no way for the JavaScript to differentiate between them.

If you switch the IDs to classes it will work, see here: http://jsfiddle.net/j72UG/2/

HTML

<input type='button' value="add" id="addLi" />
<ul class="list">
    <li class="dateLi">
        <input type='text' class='date' />
    </li>
</ul>

JS

var liClone;

$(function () {
    liClone = $(".dateLi").clone(true);
    $(".dateLi").remove();
    $("#addLi").click(function () {
        var clonado = liClone.clone(true);
        clonado.appendTo(".list");
        clonado.find("input").datepicker();
    });
});

Upvotes: 3

Related Questions