Cannot refer to dynamically created element by name
I have a table with one row when creating a page:
<TD><INPUT type="text" name="when"/></TD>
So when the user clicks on this item, the datepicker appears:
$(document).ready(function() {
$('[name="when"]').datepicker();
});
When the user adds a new row to this table, I call the setClass function to set this to a new row (all rows):
function setClass() {
$('[name="when"]').datepicker();
}
But that doesn't work on these dynamically generated strings. Why?
This is how I add the lines:
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" class="add_remove_row" />
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[1].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
setClass();
}
source to share
Got it!
The problem is that when a jQuery plugin is applied to an element datepicker
, the class is set to an input called hasDatepicker
.
When you call the plugin again, it checks first if the class already exists ... If so, then JQuery does not apply the datepicker because it understands that it is already being applied.
Since you are copying innerHTML
from an already existing cell:
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
you will copy the input with the class already set hasDatepicker
. Therefore JQuery will not implement the plugin.
Simple fix is to remove the class before calling datepicker
:
var setClass = function() {
$('[name="when"]').removeClass("hasDatepicker").datepicker();
}
source to share
You should just initialize the plugin for the newly added elements. However, you need to take some special steps.
The datepicker plugin puts the class hasDatepicker
on the elements it has already initialized and does not reinitialize them. Since you are copying an element that this class has, it needs to be removed in order for it to be reinitialized. Second, if the item has no ID, the datepicker adds a random ID to it. The IDs must be unique, but your code is copying the ID. In my code below, I just remove the ID from the elements, so the plugin will add a new unique one. If I didn't, the datepicker on a new line would fill the first line (because it uses the ID internally when it detects input to update after you select something from the datepicker).
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[01].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
setClass(row);
}
function setClass(newrow) {
$(newrow).find('.hasDatepicker').removeAttr('id').removeClass('hasDatepicker').datepicker();
}
source to share