Need help populating dynamically created input element values using datepicker
I have a table with a column of each row containing a datepicker. I can get past the issue with the datepicker pointing to the correct input/row. However, when I add the image button to the datepicker, I either get 2 buttons, with one pointing back to the first row or I get a button that is missing half the image. Weird.
Here is the code that I have:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
$(function() {
$('#addNew').click(function() {
var tbody = $('#entries tbody');
var rows = tbody.find('tr').length;
var newRow = tbody.find('tr:first').clone(true).appendTo(tbody);
newRow.find(':input').val('').each(function() {
var id = this.id
if (id) {
this.id = this.id.split('_')[0] + '_' + rows;
}
}).end().find('.datepicker').removeClass('hasDatepicker').datepicker({
goToCurrent: true,
showOn: 'both',
buttonImage: '@Url.Content("~/Content/calendar.png")'
});
});
$('.datepicker').datepicker({
goToCurrent: true,
showOn: 'both',
buttonImage: '@Url.Content("~/Content/calendar.png")'
});
});
</script>
<body>
<body>
<table id="entries">
<tbody>
<tr>
<td><input type="text" id="f_0"></td>
<td><input type="text" id="d_0" class="datepicker"></td>
<td><select id="s_0"><option>one</option><option>two</option></select></td>
</tr>
</tbody>
</table>
<button type="button" id="addNew">Add new entry</button>
</body>
</html>
Correction, I am getting 2 buttons on all new rows, one points to the current row (the new row) and the other points back to the first row. Not sure how to remove the button pointing to the original row.
Any help would be GREATLY appreciated.
Scott