CODEWITHSUNDEEP
jqueryhtmlformsdynamicjquery-ui-datepicker
buck1112
buck1112

Reputation: 498

Adding JQuery Datepicker Dynamically to Form Elements

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"); 

 });

Upvotes: 1

Views: 815

Answers (1)

cssyphus
cssyphus

Reputation: 40076

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.

Upvotes: 0

Related Questions