Question

I am trying to create a dynamic table with each row containing two date 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. All solutions say I should reinitialize the .datepicker(). I did and it’s not working. I tried changing names and Ids still no solution. Is there something I am missing here. Below is the code used for this purpose.

Yes I know there are several questions related to this here in this site. But some how I couldn’t find a solution to this as they aren’t working for me.

Javascript:

$("#addurl").click(function(){
var idValue = "input[id='breachCount']";
var counter = $(idValue).val();
var trValue = $("#rowPH"+counter).html();
var countNew = parseInt(counter)+1;
$(idValue).val(countNew);
var newFile = "<tr id='rowPH"+countNew+"'>"+trValue+"</tr>";
$(newFile).insertBefore("#addLink");
var nameTemp, actNm;
var dcounter=0;
$('#rowPH'+countNew+' input').each(function(){
    nameTemp = $(this).attr("name");
    if(nameTemp){
        actNm = nameTemp.substring(nameTemp.indexOf("."));
  $(this).attr("name","breachList["+countNew+"]"+actNm+countNew);
    }
    });
$('.datepicker').each(function(i) {
            this.id = 'datepicker' + i;
    }).datepicker();                
});

Html:

<table>.....
<tr id="rowPH0">
<td>
<input type="checkbox" checked="checked">
</td>
<td>
<input class="text_box_2 div_center" type="text" value="" name="breachList[0].breachText">
</td>
<td>
<input id="datepicker0" class="datepicker date_txt hasDatepicker" type="text" value="" name="breachList[0].activationDt"><img class="calendar" src="assets/images/calendar_icon.png">
</td>
<td>
   <input id="datepicker1" class="datepicker date_txt hasDatepicker" type="text" value=""  name="breachList[0].deactivationDt">
   <input type="checkbox" name="breachList[0].deactiveNa" checked="checked">
</td>
<td>
   <input class="text_box_2" type="text" value="" name="breachList[0].note">
</td>
</tr>
</tbody>
<tbody>
<tr id="rowPH1">
<td>
    <input type="checkbox" checked="checked">
</td>
<td>
    <input class="text_box_2 div_center" type="text" value="" name="breachList[1].breachText1">
</td>
<td>
  <input id="datepicker2" class="datepicker date_txt hasDatepicker" type="text" value="" name="breachList[1].activationDt1">
    <img class="calendar" src="assets/images/calendar_icon.png">
</td>
<td>
     <input id="datepicker3" class="datepicker date_txt hasDatepicker" type="text" value="" name="breachList[1].deactivationDt1">
    <input type="checkbox" name="breachList[1].deactiveNa1" checked="checked">
</td>
<td>
</tr>
<tr id="addLink">
    <td colspan="5" ><a href="javascript:void(0);" id="addurl">+ Add another row</a>
     <input type="hidden" id="breachCount" value="${fn:length(auditStandardBreachsForm.breachList)-1}"/>
</td></tr>
...</table>

Answer 1

Not necessary to assign unique ids to each field. Datepicker can identify each uniquely. Try putting following code in your js.

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

I’ve used it for multiple fields.

*Update*

I read your js code and it’s messed up. All you want to do is (from what you’ve stated) is when user clicks on Add Another Link , you want to add a new row in table and want them to be able to work with jQuery datepicker. Right?

The reason above code is not working is, in this case, text fields are being added dynamically . While datepciker gets initialized on onDocumentReady. So datepicker can not attach itself to these newly created form fields. A solution is to attach datepicker while creating new fields itself.

Here’s a working model I prepared for what you want to achieve. See demo on http://jsfiddle.net/phazorrise/bRE6q/