DAL-yl is not defined

Question

I am trying to implement autocomplete following django-autocomplete-light tutorial
And I could confirm that Autocomplete view was created successfully typing url directly as below.
However, when I test using form view, autocomplete is not working and get following error in console.

Uncaught ReferenceError: yl is not defined

Does anyone know what is causing this problem and how to solve this?

html page

    {% extends "base.html" %}
    {% load crispy_forms_tags %}
    {% crispy document_form document_form.helper %}
    {% load staticfiles %}

    {% block content %}
<script src="{% static 'vendor/js/select2.js' %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static 'css/form.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'vendor/css/select2.css' %}" />
        <h3>Upload Project</h3>
        {% crispy form %}


    {% endblock %}

forms.py

from django import forms
from project.models import html
from django.forms import widgets
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit
from dal import autocomplete

class DocumentForm(forms.ModelForm):

    def __init__(self,*args,**kwargs):
        super(DocumentForm,self).__init__(*args,**kwargs)
        self.helper=FormHelper(self)
        self.helper.form_id='projectForm'
        self.helper.form_method='post'
        self.helper.add_input(Submit('submit', 'Submit'))

    class Meta:
        model=html
        fields=['project','version','diff','program','location','certificate','user','html','idf','eso']
        wdigets={
            'project':autocomplete.ModelSelect2(url='project:project-autocomplete')
        }

class ProjectAutocomplete(autocomplete.Select2QuerySetView):
    def get_queryset(self):
        qs=html.objects.all()

        if self.q:
            qs=qs.filter(project__istartswith=self.q)

        return qs

I expect that select2.js needs to be included above the form in the template. — Daniel Roseman, Jul 02 '18 at 12:50
I changed select2.js to above the form in html as above. However, I still get the same error. — Katsuya Obara, Jul 02 '18 at 13:00

score 2 · Answer 1 · answered Apr 05 '20 at 16:52

you are missing the static files not just select2.js. You should have all these: CSS

    <link rel="stylesheet" type="text/css" href="{% static 'vendor/select2/dist/css/select2.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'autocomplete_light/select2.css' %}">

JS

    <script src="{% static 'autocomplete_light/jquery.init.js' %}"></script>
    <script src="{% static 'autocomplete_light/autocomplete.init.js' %}"></script>
    <script src="{% static 'vendor/select2/dist/js/select2.full.js' %}"></script>
    <script src="{% static 'autocomplete_light/select2.js' %}"></script>
    <script src="{% static 'autocomplete_light/forward.js' %}"></script>
    <script src="{% static 'autocomplete_light/jquery.post-setup.js' %}"></script>

This is what needs to be present on the final page for autocomplete to work but the correct way to add them to the template should be by including in your template this variable

this should do the trick :-)

score 0 · Answer 2 · answered Sep 16 '19 at 05:28

I tried and generated the error you are probably getting (image):

I think you are required to add a reference to the media in your template like this:

{{ context_name.media }}

Hope it helps resolve the issue.

DAL-yl is not defined

2 Answers2