Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Raise javascript errors

See original GitHub issue

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?

Issue Analytics

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

Top GitHub Comments

2reactions

daradibcommented, Jan 9, 2018

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.

1reaction

kigawascommented, Dec 17, 2018

Now you can just use autocomplete_fields since django 2.0.