CODEWITHSUNDEEP
jquerydynamicdatepicker
mrjimoy_05
mrjimoy_05

Reputation: 3568

JQuery Date-Picker doesn't work on dynamic form

<< Expanding the question of this thread >>

What I want to do is also add the jQuery function for date selector dynamically to the table. I have this table:

<table id="tblDetail">
  <tr>
    <td><input type="text" class="datepicker" name="a[]"></td>
  </tr>
</table>
<button id="addinput">Add row</button>
<input type="button" id="removeRow" value="Delete row" onclick="removeRowFromTable();"/>

And to make the selection of date on javascript, I've used:

$(function() {
  $('#addinput').click(function() {
    $('#tblDetail tbody>tr:last').clone(true).insertAfter('#tblDetail tbody>tr:last');
  });

  $('.datepicker').live("click", function() {
    $(this).datepicker({
        changeMonth: true,
        changeYear: true,
        gotoCurrent: true,
        dateFormat: 'yy-mm-dd',
        yearRange: '1980:c',
        defaultDate: '-10y'
    }).datepicker('show');
  });
});

function removeRowFromTable() {
  var tbl = document.getElementById('tblDetail');
  var lastRow = tbl.rows.length;
  if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}

It works, but when I add the row, the date-picker still show but always return the value to the first row textbox. How to do that?

UPDATE

Please check this fiddle.

I found that the code solved the problem (you will have to omit the ID element on the datepicker textbox), but it works only when you firstly add the row without choose any datepicker. But when you stop to add the row and start to use the datepicker (fill the whole textbox added previously with the datepicker), then when you add the row again, the datepicker won't work for the newly added rows.

Upvotes: 0

Views: 5694

Answers (2)

user2036306
user2036306

Reputation: 11

i think this is an old post.. i go the same problem before.. but i solved it using add another row. maybe this could help...

example:

HTML CODE

<table width="100%" border="1" cellpadding="1" id="listtahunan" class="dataTable">
  <thead>
  <tr>
    <th scope="col">Start Date</th>
    <th scope="col">End Date</th>
  </tr>
  </thead>
  <tbody id="listyear">
  <tr class="row">
    <td><input type="text" name="startDate[]" id="from1"/></td>
    <td><input type="text" name="endDate[]" id="to1" /></td>
  </tr>
  </tbody>
</table>

jQuery Code

$(document).ready(function() {
var counter = 2;
 $('#add').click(function(){
       
     var newTxtBoxTR = $(document.createElement('tr')).attr('id','row'+counter);
     
     newTxtBoxTR.html('<td><input type="text" name="startDate[]" id="from'+counter+'" /></td>' + '<td><input type="text" name="endDate[]" id="to'+counter+'" /></td>');
      
     newTxtBoxTR.appendTo("#listyear");
   
 $( "#from"+counter ).datepicker({
  //defaultDate: "+1w",
  changeMonth: true,
  changeYear: true,
  numberOfMonths: 1,
});
$( "#to"+counter ).datepicker({
  //defaultDate: "+1w",
  changeMonth: true,
  changeYear: true,
  numberOfMonths: 1,
});
 counter++;
});
});

Hope this helped.... regards.

Upvotes: 1

muthu
muthu

Reputation: 5461

You have used the id for datepicker. The id must be unique. so You would try with the class name like this

<table id="detail">
  <tr>
    <td><input type="text" id="date" name="date[]" class="datepicker"></td>
  </tr>
</table>

<script language="Javascript">
var dates = $('.datepicker').datepicker({
    showAnim: 'slide',
    dateFormat: 'yy-mm-dd'
});
</script>

if you want to add more than one in single function means try this also

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

Or otherwise you have to add id dynamically to the text box and create a datepicker with the dynamic id

This is the code which solves your problem. You have clone the row so it adds same id when you choose datepicker. now i changed into like this

$(function () {

    $('#addinput').click(function () {

        var textbox_add = $('<tr><td><input type="text" class="datepicker"  name="a[]" ></td></tr>');
        textbox_add.appendTo('#tblDetail tbody');

    });

    $('.datepicker').live("click", function () {
        $(this).datepicker({
            changeMonth: true,
            changeYear: true,
            gotoCurrent: true,
            dateFormat: 'yy-mm-dd',
            yearRange: '1980:c',
            defaultDate: '-10y'
        }).datepicker('show');
    });
});

function removeRowFromTable() {
    var tbl = document.getElementById('tblDetail');
    var lastRow = tbl.rows.length;
    if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}

Upvotes: 0

Related Questions