0

I am using the jQuery plugin Date Time Picker. Using the datetimepicker, I am able to get the normal input working when the page loads, no problem. It is initialized using the following Javascript:

$('.datetimepicker').datetimepicker({
    step:30
});

For fullness, the input works with the following html:

<input class="datetimepicker" type="text" name="datetime" />

So far so good. But, the issue is when loading AJAX (which works fine), the following input is loaded onto the page:

<input class="datetimepicker" type="text" name="datetime" id="popuppick"/>

Obviously I need to create an event handler to listen for the newly created input:

$(document).on("click", '#popuppick', function(){
    alert("new link clicked!");
    $('.datetimepicker').datetimepicker({
        step:30
    });
});

The alert works (only on the ajax loaded input), but it does not initialize the datetimepicker plugin. In fact, the error message says that:

Uncaught TypeError: $(...).datetimepicker is not a function.

Which to me feels insane, because on the same page, before the AJAX is loaded, the first one works just fine!

I've tried throwing this into the success on AJAX callback, but the same thing happens (alerts and console.logs work but the datetimepicker does not initialize). I've tried using the id as a selector but same result. Nothing is changing the fact that jQuery doesn't recognize this as a function, despite doing so on the first pageload.

I've tried using jsfiddle but I couldnt figure out how to load a plugin, so it wont really help me.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Sol Walters
  • 51
  • 1
  • 5
  • possible duplicate of http://stackoverflow.com/questions/10433154/putting-datepicker-on-dynamically-created-elements-jquery-jqueryui – atul Sep 07 '16 at 19:55
  • "I tried using jsfiddle but I couldnt figure out how to load a plugin, so it wont really help me." and I wish it was a duplicate. I tried the answers from that question and still no change. It keeps throwing an uncaught type error that datetimepicker is not a function. – Sol Walters Sep 07 '16 at 20:37

1 Answers1

0

I have created a plunker example here https://plnkr.co/edit/h2UlCwXg888QtVWJPlUn?p=preview

<script>
      $(function(){
        $("#addInput").on("click", function (event){
          var $inp = $("<input>",{id:"datePick", class:"datetimepicker"});
          $inp.appendTo("#insert");
          $('.datetimepicker').datetimepicker({
              step:30
          });
        });
      })
    </script>

here I am inserting an input field dynamically into the DOM (mimicking your ajax scenario) on button click.

Note: i have added datepicker css in the style.css file and is minified js files in the script.js file as this plugin don't have any CDN url.

Though the datepicker is not rendering properly on clicking its input filed but i am sure that will work when you implement it in your project, here i am just showing how initialize the date picker.

one more note if you are adding and removing date picker input box quite frequently then you need to do the clean up yourself otherwise it might create the memory leak.

atul
  • 552
  • 4
  • 16