django-autocomplete-light: Raise javascript errors

I just followed django-autocomplete-light tutorial, and it works very well in local mode.

Only problem is, it shows this kind of error in browser:

Uncaught ReferenceError: jQuery is not defined select2.min.js:1 Uncaught TypeError: Cannot read property 'fn' of undefined autocomplete.init.js:8 Uncaught ReferenceError: jQuery is not defined select2.full.js:17 Uncaught TypeError: $ is not a function select2.js:3 Uncaught SyntaxError: Unexpected identifier :1

This is my base.html

 
 <!DOCTYPE html>
 <html> 
    <head>
        <!-- Meta -->
        <meta charset="utf-8">
        <meta name="keywords" content="HTML5,CSS3,Template" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=0" />
        
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 

        {% block custom_stylesheet %}
        {% endblock %}

    </head>

    <body>
            <!-- HEADER -->
            {% include "skeleton/header.html" %}
            <!-- /HEADER -->

            <!-- MAIN -->
            <section>
                        {% block content %}
                        {% endblock %}
            </section>
            <!-- /MAIN -->

            <!-- FOOTER -->
            {% include "skeleton/footer.html" %}
            <!-- /FOOTER -->

         
        <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
        </script>
 
        {% block custom_js %}
        {% endblock %}

    </body>
</html>

This is my code where autocomplete applied:

{% extends "skeleton/base.html" %}

{% load static %}
  
 

{% block content %}
        {% crispy form %}
{% endblock %}

{% block custom_js %}
    {{ form.media }}
{% endblock %}

What’s wrong with it?

About this issue

Original URL
State: open
Created 7 years ago
Reactions: 1
Comments: 20 (9 by maintainers)

Most upvoted comments

The default date widget in the admin - AdminDateWidget - tries to load jQuery and breaks the order jQuery is loaded by dal. So I’m using SelectDateWidget instead which lacks pretty JS. In Django 2.0 I also get this warning:

MediaOrderConflictWarning: Detected duplicate Media files in an opposite order:
autocomplete_light/jquery.init.js
admin/js/admin/DateTimeShortcuts.js

which seems to be caused by Media.merge trying to merge two asset lists, one which has autocomplete_light’s assets before admin’s, and the other has admin’s before autocomplete_light’s.

daradib on Jan 9, 2018

Now you can just use autocomplete_fields since django 2.0.

kigawas on Dec 17, 2018

Move {{ form.media }} after jquery.

jpic on Jan 6, 2017