CODEWITHSUNDEEP
jqueryhtml
user3317777
user3317777

Reputation: 11

datepicker not working from second row on cloned rows

I am trying to create a dynamic table with each row containing onedate fields. I am using Jquery datepicker. For some reason only the first row is showing in the date picker calendar. Other dynamically created fields are not showing the calendar. I should mention that the first row is by default in place when this page is loaded. Only from the second line it's dynamically created.

Javascript:

<script type='text/javascript'>
$(function() {
$( ".datepicker" ).datepicker();
});

$(document).ready(function() {
var currentItem = 1;
$('#addnew').click(function(){
currentItem++;
$('#items').val(currentItem);
var strToAdd = '<tr><td><input type="text" class="datepicker" name="Internal_Deadline'+currentItem+'" id="Internal_Deadline'+currentItem+'" /></td></tr>';
$('#data').append(strToAdd);

});
});

</script>

Html:

<form name="pipeline" action="" method="post">
<TABLE id="data" class="dd" style="">

<tr><td style="text-align:center;"><b style="font-size: 14px;">Project Plan</b></td><td><input type="button" id="addnew" name="addnew" value="Add a Row" /></td></tr>
<tr><td><input type="text" class="datepicker" name="Internal_Deadline" /></td></tr>
<input type="hidden" id="items" name="items" value="1" /> 
</TABLE>
</form>

Upvotes: 1

Views: 2152

Answers (4)

Jai
Jai

Reputation: 74738

You have to initialize the datepicker to the newly appended element:

$(document).ready(function () {
    var currentItem = 1;
    $(".datepicker").datepicker();
    $('#addnew').click(function () {
       currentItem++;
       $('#items').val(currentItem);
       var strToAdd = '<tr><td><input type="text" class="datepicker" name="Internal_Deadline' + currentItem + '" id="Internal_Deadline' + currentItem + '" /></td></tr>';
       $('#data').append(strToAdd);
       $(".datepicker").datepicker(); // <------here initialize the datepicker
    });
});

BTW you don't need to have two doc ready handlers you can put in just one the way suggested in this answer.

Demo @ Fiddle

Upvotes: 2

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

change the script like this

$(document).ready(function() {
var currentItem = 1;
$('#addnew').click(function(){
currentItem++;
$('#items').val(currentItem);
var strToAdd = '<tr><td><input type="text" class="datepicker"    name="Internal_Deadline'+currentItem+'" id="Internal_Deadline'+currentItem+'" /></td></tr>';
$('#data').append(strToAdd);
$(.datepicker).datepicker();

});
});

Upvotes: 0

Drixson Ose&#241;a
Drixson Ose&#241;a

Reputation: 3641

the new element are not instantiating datepicker. What I recommend to you is that, after clicking and creating a new element you would call datepicker again.

Something like this:

$('.btn').on('click',function(){

  //append element
   $('#target').append('<input />' , {'type' : 'input' , 'class' : 'datepicker'});

  //make them date picker
  $( ".datepicker" ).datepicker();

});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You need to initialize the widget again

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

jQuery(function ($) {
    var currentItem = 1;
    $('#addnew').click(function () {
        currentItem++;
        $('#items').val(currentItem);
        var strToAdd = '<tr><td><input type="text" class="datepicker" name="Internal_Deadline' + currentItem + '" id="Internal_Deadline' + currentItem + '" /></td></tr>';
        //notice the use of appendTo() so that we can get the newly added element back
        var $row = $(strToAdd).appendTo('#data');
        //initialize the datepicker widget for the .datepicker elements within the newly added rows
        $row.find('.datepicker').datepicker();
    });
});

Upvotes: 1

Related Questions