Uncaught Type Error when dynamically creating ui DateTimePicker

Question

This works:

    $(document).ready(function ($) {
        $('#datetimepicker1').datetimepicker();

when I have

 <p>Date: <input type="text" id="datetimepicker1"></p>

Placed on my main form. As it works it suggests to me all the references are ok.

However when I launch a modal:

$(function () {
            $('#rotasModal').on("show.bs.modal", function (e) {

which JavaScript appends

<input type="text" id="datetimepicker2">
 <input type="text" id="datetimepicker3">...

x number of these to a form (each having a unique id) I get Uncaught TypeError: $(...).datetimepicker is not a function when calling:

$('#datetimepicker2').datetimepicker();

Even when I defer that and try it in the debug console, the same error. It seems to be related to the modal and not the fact that the components are generated when the modal is shown (as I've also tried creating them directly in the modal's form and not generating them on the fly).

Any ideas what could be causing this please?

Edit: As I've been asked to be more specific re. the code, I have included the references in the layouts/app.blade.php:

<script language="JavaScript"
            src="https://code.jquery.com/jquery-3.2.1.min.js"
            integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
            crossorigin="anonymous"></script>
    <script language="JavaScript"
    src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
    integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
    crossorigin="anonymous"></script>
    <script src="{{asset('js/jquery-ui-timepicker-addon.js')}}"></script>
    <script src="{{asset('js/jquery-ui-sliderAccess.js')}}"></script>

At the top of by create.blade I have:

extends('layouts.app')
@section('content')

    <div class="container">

Further down I have the modal declared:

div class="modal fade" id="rotasModal"
     tabindex="-1" role="dialog"
     aria-labelledby="rotasModalLabel">

If I do a view source I see:

<!DOCTYPE html>

<script language="JavaScript"
        src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous"></script>
<script language="JavaScript"
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>


<script src="http://oc.com:8888/oc/public/js/jquery-ui-timepicker-addon.js"></script>
<script src="http://oc.com:8888/oc/public/js/jquery-ui-sliderAccess.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>

 <link href="http://oc.com:8888/oc/public/css/jquery-ui-timepicker-addon.css">
    <!-- Styles -->
    <link href="http://oc.com:8888/oc/public/css/app.css" rel="stylesheet">
    <link href="http://oc.com:8888/oc/public/css/ocm.css" rel="stylesheet">

You can ignore my statement about creating dynamically (actually from the data in an ajax success) because I tried commenting it out and hardcoding a control.

It still stands that the control will only work if I call .datetimepicker() from $(document).ready(.... .

I don't know how the plugin code is not referenced. If it is the case then how is it available in the .ready() and why then if I call $('#datetimepicker1').datetimepicker(); from the Chrome console I get the same error?

Thanks for your persistence in helping me.

it's time to use class then, $('.datetimepicker') then reference desired dom — Chay22
– Chay22, Commented Dec 22, 2017 at 22:33
Show us where/how you place the datepicker code within your page. Not call it but the plugin code itself — Mark Schultheiss
– Mark Schultheiss, Commented Dec 22, 2017 at 22:57
You do NOT need both those jQuery.min versions in there. IF you need the older browsers just incldude the second one. — Mark Schultheiss
– Mark Schultheiss, Commented Dec 24, 2017 at 16:44
ALWAYS put the css FIRST and all in the same place - not between JS files - not just because it is "neater" but actually it will work in the browser better - and impact render process. Search on "CSS Render blocking" and other topics as a reference — Mark Schultheiss
– Mark Schultheiss, Commented Dec 24, 2017 at 16:51

Mark Schultheiss · Accepted Answer · 2017-12-22 23:03:01Z

1

Perhaps you wanted to have shown.bs.modal as

$(function(){
        $('#rotasModal').on("shown.bs.modal", function (e) {

instead of

$(function () {
        $('#rotasModal').on("show.bs.modal", function (e) {

edited Dec 22, 2017 at 23:03

answered Dec 22, 2017 at 22:48

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

KevinY Over a year ago

Thanks for the suggestion but I can only avoid the error if $('#datetimepicker').datetimepicker(); is called in $(document).ready(function ($) {.. of the main blade. It errors both on the shown.bs.modal and in the Chrome console if I try to do it manually after it has fully loaded. So have no idea how I can dynamically create a timedatepicker.

Mark Schultheiss Over a year ago

The error seems to indicate the the plugin code is not referenced, hence the questions in that regard on the post

KevinY Over a year ago

Thank you Mark. It was a combination of my includes and definitely I needed shown and not show.

Mark Schultheiss Over a year ago

Glad to help, second set of eyes is often useful :)

Collectives™ on Stack Overflow

Uncaught Type Error when dynamically creating ui DateTimePicker

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related