Adding JQuery Datepicker Dynamically to Form Elements

Question

I am working on a form with dynamically added inputs, by using the cloned method. Each input will need a datepicker.
The name of each input will be distinct for output.

I am using the Jquery UI Datepicker for this. The problem that occurs (the message in the console) is "$cloned.find(...).attr(...) is undefined"

I went to another post jQuery DatePicker not working on newly added row
and tried removing the hasDatepicker class (included in code below), but the problem persists.
Thanks for any input or resources.

The code is below:

 <table>
 <tr>
 <td name="a" class="FormLabel" width="100px"><strong>Class Year*</strong></td>
 <td width="100px"><input type="text" id="datepicker" name="ClassYear_1" class="usedatepicker" value="" tabindex="4" /></td>
  </tr>
  </table>
  <button type="button" id="add-btn" name="add-btn">Add Class Year</button>

JS Code:

 function clone2(){
 var $cloned = $('table tr:last').clone();
 $cloned.removeClass('hasDatepicker').datepicker();
 //console.log($(this));
 //alert($(this).attr('name'));
 var oldIndex = $cloned.find('input').attr('name').match(/\d+/);
 var newIndex = parseInt(oldIndex,10)+1;
 $cloned.find('input').each(function(){
 var newName = $(this).attr('name').replace(oldIndex, newIndex);
 $(this).attr('name', newName);
 });
 $cloned.insertAfter('table tr:last');
 }

 $('#add-btn').click( function() {
 clone2();  
 });


 //attach datepicker - begin
 $(document).ready(function() {

 $(".usedatepicker").datepicker(); // or 
 $(".usedatepicker").datepicker("refresh"); 

 });

cssyphus · Answer 1 · 2016-08-12T19:23:14.400

After cloning / inserting the new table row, you have new elements with .usedatepicker class that have not yet been initialized with datepicker.

I notice you are trying to initialize the new row with datepicker before adding it to the DOM. Two problems. First, you are trying to init datepicker to the entire (new) row and not just to the input field, and second you must do this after injecting the row into the DOM.

Try something like this:

function clone2(){
    var $cloned = $('table tr:last').clone();
    $cloned.removeClass('hasDatepicker').datepicker();
    //console.log($(this));
    //alert($(this).attr('name'));
    var oldIndex = $cloned.find('input').attr('name').match(/\d+/);
    var newIndex = parseInt(oldIndex,10)+1;
    $cloned.find('input').each(function(){
        var newName = $(this).attr('name').replace(oldIndex, newIndex);
        $(this).attr('name', newName);
    });
    $cloned.insertAfter('table tr:last');

    $(".usedatepicker").datepicker();  //<=== NEW
}

Another note: You have an ID with value datepicker. When the row is cloned, you will have multiple elements with the same ID. A no-no. Change the ID to a class and all will work fine. Note that the only essential difference between a class and an ID is that you cannot use the same ID for more than one element. Simple solution: switch ID to class.

If that is not good enough, perhaps because you need to address each input field directly via a unique ID, do the same thing to the ID attribute that you are already doing to the name attribute.

Thanks so much for your post. I have a question, regarding the distinct ids in Jquery Datepicker. When used such as this (https://jsfiddle.net/buck1115/gj2ohyf3/50/), Jquery Datepicker generates unique ids. Although of course I can generate them as you stated, I was wondering why the native id generation seems to not work in this case? — buck1112, Aug 15 '16 at 14:41
I've used your suggestions here (https://jsfiddle.net/buck1115/hhzL1kw6/26/), although now, I can generate all of the new (cloned) inputs I want, provided non of the input boxes are clicked in. The top row input box will only fire the datepicker once the second box has been clicked/fired. Only the top two boxes will fire. My new code has distinct IDs. I tried removing the IDs and the ID code, just leaving the class, but that had the same result. — buck1112, Aug 15 '16 at 15:17
To amend my last comment - the error message in the console is: `TypeError: $cloned.find(...).attr(...) is undefined` — buck1112, Aug 15 '16 at 18:21

Adding JQuery Datepicker Dynamically to Form Elements

1 Answers1