How to use Bootstrap Datetimepicker on multiple dynamically created inputs

Question

I am using ajax to update a table. The table has multiple date inputs and I would like to have a datetimepicker popup when any of the inputs are clicked.

I have tried assigning a class to the input but nothing happens and I get no errors in console. I am just learning jquery, javascript so, I apologize if this is a stupid questions.

I am using the below code to initialize the datetimepicker:

<!-- Datepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">   
$( document ).ready(function() {
        $('.dateedit').each(function(){
      $(this).datetimepicker();
      });
   });

I am using the following code to populate my table:

$.ajax({
            url:"<?php echo base_url(); ?>clock/search_data",
            method:"post",
            dataType:"JSON",
            data:{fromDate:fromDate, toDate:toDate, userId:userId},
            success:function(data){
                console.log(data)
                var html = '<tr>';
                     for(var count = 0; count < data.length; count++){
                        html += '<tr>';
                        html += '<td class="table_data" data-row_id="'+data[count].id+'" data-column_name="id" >'+data[count].first_name+" "+data[count].last_name+'</td>';
                        html += '<td><input type="text" class="dateedit" data-row_id="'+data[count].id+'" data-column_name="clock_in" value="'+data[count].clock_in+'"></td>';
                        html += '<td><input type="text" class="dateedit" data-row_id="'+data[count].id+'" data-column_name="clock_out" value="'+data[count].clock_out+'"></td>';
                        html += '<td class="table_data" data-row_id="'+data[count].id+'" data-column_name="time">'+data[count].time+'</td>';
                        html += '<td><button type="button" name="delete_btn" id="'+data[count].id+'" class="btn btn-xs btn-danger btn_delete"><span class="glyphicon glyphicon-trash"></span></button></td></tr>';

                     }  

                     $('tbody').html(html);
                 }
                });
        }

I am using the below code to perform my database update function:

$(document).on('change','.dateedit', function () {
            var id = $(this).data('row_id');
            var table_column = $(this).data('column_name');
            var value = $(this).val();
                $.ajax({
                  url:"<?php echo base_url(); ?>clock/update",
                  method:"POST",
                  data:{id:id, table_column:table_column, value:value},
                  success:function(data){
                    console.log(data)
                    search_data();
                  }
               })


          });

No matter what I seem to change I cannot get the datetimepicker to populate. Any help is appreciated.

try to move $('.dateedit').each(function(){ $(this).datetimepicker(); }); inside success function. ready function is fired as soon as the page's Document Object Model (DOM) becomes safe to manipulate, but here you are using ajax query, so probably when ready runs, html doesn't contains dateedit element. — Lety, Jun 10 '19 at 15:12

score 3 · Accepted Answer · answered Jun 10 '19 at 15:26

I have run into issues like that before. There may be a couple of solutions.

There is already an answer posted on SO here:

putting-datepicker-on-dynamically-created-elements

They actually suggest:

$('body').on('focus',".datepicker_recurring_start", function(){
    $(this).datepicker();
});

and that applies generally to dynamically loaded content. I think that datepicker does check to see if the handler is already attached so that it does not get attached more than once.

Another approach that I sometimes use it to just create a function to attach the handler to an element or group of elements and call that in the "success" handler of your AJAX call. That actually seems to be more reliable sometimes because delegating to another element up the DOM has caused some issues for me in some cases. Also, you can customize the datepicker options in the success handler if they are different from the defaults that you are using when the page is loaded.

Using $(document) has caused issues sometimes for me, but if you delegate to an enclosing element already in the DOM that usually works.

With the call from success handler approach you could just put:

  $('.dateedit').each(function(){  // or change your selector to $(e + '.datedit') where e is the selector for the enclosing div or whatever.

  $(this).datetimepicker();
  });

in the success handler.

I think that you can even use a selector like '.dateedit:not(.hasdatepicker)' to attache to elements not already having the handler, but that may not be necessary because jQuery often does that for you.

Thanks works great. Added above code within my success function. Appreciate it. — XxnumbxX, Jun 10 '19 at 19:13

How to use Bootstrap Datetimepicker on multiple dynamically created inputs

1 Answers1