Forums

Datepicker in DOM

Permalink
I'm trying to dynamically add datepicker inputs and they add fine, but the event is not registering in DOM.

ideas?

function addDate() {
  var dt = document.getElementById('addDate');
  var o_node = document.getElementById('dateLum');
  var node = ++document.getElementById('dateLum').value;
  o_node.value = node;
  var divIdName = "newDate"+node;
  var newDateDiv = document.createElement('div');
  newDateDiv.setAttribute('id',divIdName);
  newDateDiv.setAttribute('style','margin-top: 25px;margin-top: 25px;');
  newDateDiv.innerHTML = "<span id=\"date"+node+"_dw\" class=\"ccm-input-date-wrapper\"><input value=\"<?php echo date('m/d/Y');?>\" class=\"ccm-input-date hasDatepicker\" name=\"date"+node+"\" id=\"date"+node+"\"/></span><script type=\'text/javascript\'>$(function() { $(\"date"+node+"\").datepicker({ changeYear: true, showAnim: \'fadeIn\' }); });<script>";
  dt.appendChild(newDateDiv);
}
RadiantWeb
 
Tony replied on at Permalink Reply
Tony
I'm not sure if this is the problem, but it's probably not the best idea to load that function within the script tag.
try just putting the call to .datepicker after you've already injected that html, and after you've appended it to the dom. you've also got two ids with the same value (the span and the input are both "date"+node).
RadiantWeb replied on at Permalink Reply
RadiantWeb
sorry, not seeing how you call .datepicker to that element post append. still learning javascript to some degree.

is that:
dt.appendChild(newDateDiv);
var ele = getElementById(dividName."date"+node);
ele.datepicker({changeYear: true, showAnim: 'fadeIn' });


I'm certain this is way off. lol
Tony replied on at Permalink Reply
Tony
remember that a query dom element isn't the same thing as a normal dom element:

$('#date'+node).datepicker({...})
RadiantWeb replied on at Permalink Reply
RadiantWeb
so...
dt.appendChild(newDateDiv);
$('#date'+node).datepicker({ changeYear: true, showAnim: 'fadeIn' }); });


it's not liking that. lol

Chad
Tony replied on at Permalink Reply
Tony
did you make those two ids unique, so that it's referring to the input and not the span?
RadiantWeb replied on at Permalink Reply
RadiantWeb
yeah, if you look, one is date_node_dw and the other is date_node

C
RadiantWeb replied on at Permalink Reply
RadiantWeb
got it.

- add the input minus the datepicker class
- add the script
- add the class back in

function addDate() {
  var dt = document.getElementById('addDate');
  var o_node = document.getElementById('dateLum');
  var node = ++document.getElementById('dateLum').value;
  o_node.value = node;
  var divIdName = "newDate"+node;
  var newDateDiv = document.createElement('div');
  newDateDiv.setAttribute('id',divIdName);
  newDateDiv.setAttribute('style','margin-top: 25px;margin-top: 25px;');
  newDateDiv.innerHTML = "<span id=\"date"+node+"_dw\" class=\"ccm-input-date-wrapper\"><input value=\"<?php echo date('m/d/Y');?>\" class=\"ccm-input-date\" name=\"date"+node+"\" id=\"date"+node+"\"/></span>";
  dt.appendChild(newDateDiv);
  var newDateScript = document.createElement('script');
  newDateScript.innerHTML = "$(function() { $(\"#date"+node+"\").datepicker({ changeYear: true, showAnim: \'fadeIn\' }); });";
  dt.appendChild(newDateScript);
  var getNode = document.getElementById("date"+node);
Viewing 15 lines of 18 lines. View entire code block.