jQuery datepicker not working on dynamically generated HTML

Question

I have this code:

<div id="infants-data"></div>

for( var i = 1; i <= 10; i++)
{ 
        var currInfantDataField = '' +
        '<div class="field">Infant ' + i + ': ' + 
         '<div style="width:600px">' + 
          '<select id="infant-'      + i + '-title" style="border:solid 1px #cccccc;">'+ 
           '<option selected>--Title--</option>'    +
           '<option value="master">Master</option>' + 
           '<option value="miss">Miss</option>'     +   
          '</select>' +
          '<input type="text" id="infant-' + i + '-surname" placeholder="Surname"  style="width:110px; border:solid 1px #cccccc;">' +
          '<input type="text" id="infant-' + i + '-othernames" placeholder="Othernames"  style="width:120px; border:solid 1px #cccccc;">' + 
          '<input type="text" id="infant-' + i + '-birthdate"  placeholder="Date of Birth"  style="width:120px; border:solid 1px #cccccc;" readonly>' + 
         '</div>' +
        '</div>';

        document.getElementById('infants-data').innerHTML += currInfantDataField;

        jQuery( "#infant-" + i + "-birthdate").datepicker({ 
        changeMonth: true,  
        changeYear: true, 
        yearRange:'1900:<?php echo ( date('Y') - 2 ); ?>',
        onSelect: (function(){doSomethingUsefulWithField("infant-" + i + "-birthdate")})
        });
}

For some reason I can't explain, the datepicker is not working.

P.S I have tried this and several others like it but they did not work in my case, hence my asking this.

Your "Date of Birth" field is set as readonly, so you can't modify it. — mprat, May 14 '15 at 14:47
@mprat, that's not the reason it isn't working. I already tried removing the `readonly` attribute from the field, but it didn't work. — NaijaProgrammer, May 14 '15 at 14:52
Can you be more specific about how it is "not working"? Are you seeing any errors in the console? Is your `jQuery( "#infant-" + i + "-birthdate")` selector finding anything? — talemyn, May 14 '15 at 14:57
@talemyn, nothing shows up in the console, not errors and not any debugging information whatsoever. — NaijaProgrammer, May 14 '15 at 14:59

Iftah · Answer 1 · 2015-05-14T15:54:31.160

You have two problems in your code, #1 is you keep adding a datepicker and then later overwrite the entire innerHtml - breaking the datepickers added. The other one is related to the event handler which uses the same handler (with same i value) for all datepickers (see fix at Bug#2 below).

One way to fix bug #1 is to add all the html (and update the DOM only once for efficency and not 10 times), and then create all the datepicker

See JSFiddle: http://jsfiddle.net/byhpc73L/2/

Bug #2: You have a bug passing the parameter "i" to the onSelect handler - all handlers will use the same i which will be 11 when the loop finishes. You need a closure to bind the current i value to a function - see below.

eg.

for (var i=1; i<=10; i++) {  ... create html string ... }
.. update DOM from html string

for( var i = 1; i <= 10; i++) {
    jQuery( "#infant-" + i + "-birthdate").datepicker({ 
        changeMonth: true,  
        changeYear: true, 
        yearRange:'1900:2015',
        onSelect:(function(ii) { return function(){doSomethingUsefulWithField("infant-" + ii + "-birthdate")}
                           })(i)   /* note the function gets `i` and returns a function bound to the current value */
    });
}

score 0 · Answer 2 · answered May 14 '15 at 15:15

Rewrite your .datepicker() to traverse down $(document), which will find your respected new 'html'

    jQuery("#infant-" + i + "-birthdate", document).datepicker({ 
        changeMonth: true,  
        changeYear: true, 
        yearRange:'1900:<?php echo ( date('Y') - 2 ); ?>',
        onSelect: (function(){
            doSomethingUsefulWithField("infant-" + i + "-birthdate")
        })
    });

That, or check to make sure you haven't got any JavaScript errors prior to the .datepicker() initialisation which could be 'blocking' the execution.

score 0 · Answer 3 · answered May 14 '15 at 15:30

You need to delegate the event.

For ease of selecting, add a class to your datepickers

 '<input type="text" class="mydatepickclass"  ....

and then you can use a listener that targets a parent that exists at dom-ready, with this child. Use a parent div, or if none, go all the way out to the body. It also doesn't need to be in the loop.

$("body .mydatepickclass").datepicker({
     //options...  and use $(this) or $this to target the selected items, not i
});

so, to re-write your entire loop,

<div class="wrapper">
<div id="infants-data"></div>

<script>
  for( var i = 1; i <= 10; i++)
   { 
    var currInfantDataField = '' +
    '<div class="field">Infant ' + i + ': ' + 
     '<div style="width:600px">' + 
      '<select id="infant-'      + i + '-title" style="border:solid 1px #cccccc;">'+ 
       '<option selected>--Title--</option>'    +
       '<option value="master">Master</option>' + 
       '<option value="miss">Miss</option>'     +   
      '</select>' +
      '<input type="text" id="infant-' + i + '-surname" placeholder="Surname"  style="width:110px; border:solid 1px #cccccc;">' +
      '<input type="text" id="infant-' + i + '-othernames" placeholder="Othernames"  style="width:120px; border:solid 1px #cccccc;">' + 
      '<input type="text" class="mydatepickclass" id="infant-' + i + '-birthdate"  placeholder="Date of Birth"  style="width:120px; border:solid 1px #cccccc;" readonly>' + 
     '</div>' +
    '</div>';

    document.getElementById('infants-data').innerHTML += currInfantDataField;
 }

 jQuery( ".wrapper .mydatepickclass").datepicker({ 
    changeMonth: true,  
    changeYear: true, 
    yearRange:'1900:<?php echo ( date('Y') - 2 ); ?>',
    onSelect: (function(){doSomethingUsefulWithField($(this).val())})
    });
 </script>

</div>

jQuery datepicker not working on dynamically generated HTML

3 Answers3

Linked