Datepicker selected value always goes on the first textbox

Question

I am trying to create a form in which elements are added dynamically by cloning existing elements in the form. Now the problem i am facing is when i cloned textbox which has class "datepicker".When I select the date from cloned element it's selected value shows in the first element from which I cloned it.

Here is the code:

$(copiedDiv).find('input[type="text"]').filter('.datepicker').removeClass('hasDatepicker').datepicker();

and in document.ready I tried this:

$(function () {
    $(".datepicker").datepicker();
});

and this:

$(function () {
    $(".datepicker").each(function(){$(this).datepicker()});
});

but both gives the same result. Plz guide me. . Thanx

You should initialize `.datepikcet();` on new cloned DOM element, because all jQuery initialized on load, wont work on new DOM elements, you should initializes new. — Michael, Aug 12 '14 at 07:20
Wouldn't first line of code initializing the new cloned element? $(copiedDiv).find('input[type="text"]').filter('.datepicker').removeClass('hasDatepicker').datepicker(); — user2517610, Aug 12 '14 at 07:26

score 3 · Accepted Answer · answered Aug 12 '14 at 07:39

3

As you are creating input elements dynamically by cloning original div, here .clone() will do shallow cloning and not deep cloning and hence input box instance will be same always and hence datepicker will refer to original input box.

You can remove id and class of the copied input box and then apply datepicker on it.

Please see below jquery code :

$(function(){
    $('input[type=button]').click(function(){
      var copiedDiv = $('#container').clone();

      var input = $(copiedDiv).find('input[type="text"]');

      $(copiedDiv).removeAttr('id');

      $(input).removeAttr('id').removeClass('datepicker hasDatepicker').val('');

      $(input).datepicker();             

      $('#container').after(copiedDiv);
    });

  // bind datepicker to existing input with class="datepicker"
  $(".datepicker").datepicker();
});

Demo

answered Aug 12 '14 at 07:39

Bhushan Kawadkar

28,279
5
35
57

I have assigned them different id and name. . – user2517610 Aug 12 '14 at 07:42
You can see my jsfiddle link is working as expected, can you please share your code and jsfiddle link? – Bhushan Kawadkar Aug 12 '14 at 07:44
Yes your jsfiddle working perfectly . . but in my situation i can not remove the id . . instead i am changing the id of the element, so that each element got unique id. . is id is really matters in this case? – user2517610 Aug 12 '14 at 07:52
Not necessary to remove `id` but it should be unique when you assign new one. But you need to remove `class="hasDatepicker"` before assigning datepicker. – Bhushan Kawadkar Aug 12 '14 at 07:53
Yes ids are unique and i think this line will remove the class: $(copiedDiv).find('input[type="text"]').filter('.datepicker').removeClass('hasDatepicker').datepicker(); – user2517610 Aug 12 '14 at 07:55
I think instead of using `find().filter()` you should use `find()` only like `$(copiedDiv).find('.datepicker').removeClass('hasDatepicker').datepicker();` and try – Bhushan Kawadkar Aug 12 '14 at 08:00
I have used the line you suggested but still the same result . . – user2517610 Aug 12 '14 at 09:10
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/59167/discussion-between-bhushan-kawadkar-and-user2517610). – Bhushan Kawadkar Aug 12 '14 at 09:15

Datepicker selected value always goes on the first textbox

1 Answers1

Linked