Uncaught ReferenceError: $ is not defined

[lowjumpingfrog]

I am using Django 1.11, Python 3 and Crispy Forms. The form renders properly but, the a javascript error pops up complaining about an Uncaught Reference of:
$("#id_work_start_time_pickers:has(input:not([readonly],[disabled]))").datetimepicker({"format": "YYYY-MM-DD HH:mm:ss", "ignoreReadonly": true, "sideBySide": true});
The generated HTML looks like:

<div id="div_id_work_start_time" class="form-group">
<label for="id_work_start_time" class="control-label  requiredField">
                Work start time<span class="asteriskField">*</span>
</label>
<div class="controls ">
<div class="input-group date" id="id_work_start_time_pickers">
<input class="form-control datetimepicker form-control" id="id_work_start_time" name="work_start_time" required="True" type="text"/>
<span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div>
<script>
      $(function(){
        $("#id_work_start_time_pickers:has(input:not([readonly],[disabled]))").datetimepicker({"format": "YYYY-MM-DD HH:mm:ss", "ignoreReadonly": true, "sideBySide": true});
      });
    </script>
</div>

Not sure where read only is being set? Any Ideas. I tried passing the option to ignore. But, no luck

[samuelcolvin]

Have you got jQuery included in the page?

…

On 27 Nov 2017 23:07, "lowjumpingfrog" ***@***.***> wrote: I am using Django 1.11, Python 3 and Crispy Forms. The form renders properly but, the a javascript error pops up complaining about an Uncaught Reference of: $("#id_work_start_time_pickers:has(input:not([readonly],[disabled]))").datetimepicker({"format": "YYYY-MM-DD HH:mm:ss", "ignoreReadonly": true, "sideBySide": true}); The generated HTML looks like: <div id="div_id_work_start_time" class="form-group"> <label for="id_work_start_time" class="control-label requiredField"> Work start time<span class="asteriskField">*</span> </label> <div class="controls "> <div class="input-group date" id="id_work_start_time_pickers"> <input class="form-control datetimepicker form-control" id="id_work_start_time" name="work_start_time" required="True" type="text"/> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> <script> $(function(){ $("#id_work_start_time_pickers:has(input:not([readonly],[disabled]))").datetimepicker({"format": "YYYY-MM-DD HH:mm:ss", "ignoreReadonly": true, "sideBySide": true}); }); </script> </div> Not sure where read only is being set? Any Ideas. I tried passing the option to ignore. But, no luck — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#13>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AD2jGYFWETO62vEu3kC9psjiRalPRDiyks5s60CigaJpZM4QscBf> .

[lowjumpingfrog]

Yes, from a cdn: code.jquery.com/jquery-3.2.1.js I usually load it at the bottom of the page. Just before the bootstrap js: maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

[samuelcolvin]

I think you need it at the top of thy page for this.

…

On 28 Nov 2017 02:18, "lowjumpingfrog" ***@***.***> wrote: Yes, from a cdn: code.jquery.com/jquery-3.2.1.js I usually load it at the bottom of the page. Just before the bootstrap js: maxcdn.bootstrapcdn.com/ bootstrap/3.3.7/js/bootstrap.min.js — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#13 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AD2jGWIcurR4hQE0oXwGKGQNWvgb-Db2ks5s621egaJpZM4QscBf> .

[lowjumpingfrog]

When I move the script loads to the head tag I get this error:

Uncaught TypeError: input.size is not a function
    at dateTimePicker (bootstrap-datetimepicker.js:2254)
    at HTMLDivElement.<anonymous> (bootstrap-datetimepicker.js:2309)
    at Function.each (jquery-3.2.1.js:362)
    at jQuery.fn.init.each (jquery-3.2.1.js:157)
    at jQuery.fn.init.$.fn.datetimepicker (bootstrap-datetimepicker.js:2304)
    at HTMLDocument.<anonymous> ((index):39)
    at mightThrow (jquery-3.2.1.js:3583)
    at process (jquery-3.2.1.js:3651)

[samuelcolvin]

No idea, doesn't look like an issue with with library though. This is for issues not questions. Maybe Brady to ask on stackoverflow.

…

On 28 Nov 2017 15:19, "lowjumpingfrog" ***@***.***> wrote: When I move the script loads to the head tag I get this error: Uncaught TypeError: input.size is not a function at dateTimePicker (bootstrap-datetimepicker.js:2254) at HTMLDivElement.<anonymous> (bootstrap-datetimepicker.js:2309) at Function.each (jquery-3.2.1.js:362) at jQuery.fn.init.each (jquery-3.2.1.js:157) at jQuery.fn.init.$.fn.datetimepicker (bootstrap-datetimepicker.js:2304) at HTMLDocument.<anonymous> ((index):39) at mightThrow (jquery-3.2.1.js:3583) at process (jquery-3.2.1.js:3651) — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#13 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AD2jGZy0KwEaVYkQ9Imd1cNzh94KqCntks5s7CRqgaJpZM4QscBf> .

[felix-engelmann]

@lowjumpingfrog If you want to keep your JS imports at the bottom, you could wrap the jQuery calls inside a defer loop of vanilla JS. The easiest is by subclassing it and overwriting js_template

 js_template = """
 <script>
     (function defer() {
           if (window.jQuery) {
                 $(function(){
                     $("#%(picker_id)s:has(input:not([readonly],[disabled]))").datetimepicker(%(options)s);
                 });
           } else {
                setTimeout(function() { defer() }, 50);
           }
     })();
 </script>"""

or use PR #9