TaggitSelect2 rendered as blank select box outside of admin

wchesley commented 3 years ago

I've got Autocomplete working on the admin page, using the same form I'm having issues with, in the user-facing page. The TaggitSelect2 in the user-facing page is being rendered as a select box, that is blank, with no ability to input text. On the admin page, I have the ability to input text, and autocomplete works as expected.
Here's my code:
Model:

class KnowledgeElement(models.Model):
    ccs_tag = TaggableManager(through="KnowledgeElementTags")

#Through table: 
class KnowledgeElementTags(GenericUUIDTaggedItemBase, TaggedItemBase):
    KETags = models.ForeignKey(Tag, related_name="KETags",
                               on_delete=models.SET_NULL, null=True)

Form:

class CreateKnowledgeElement(forms.ModelForm):
    class Meta:
        model = KnowledgeElement
        fields = '__all__'

        widgets = {
            'ccs_tag': autocomplete.TaggitSelect2(
                url='tag-autocomplete',
                )
        }

Url:

    path(
          'taggit-autocomplete/',
          autocomplete.Select2QuerySetView.as_view(
            queryset=Tag.objects.all().order_by('name'),
        ),
          name="tag-autocomplete",
     ),

Template:

{% extends 'knowledge/knowledge.html' %}
{% block content %}
<center>
    <h1>Create Knowledge</h1>

    <form method='POST' enctype="multipart/form-data">
        {% csrf_token %}
        <table class='w-50 table table-light'>
            {% for field in knowledge_element_form %}
            <tr>
                <th>{{field.label}}</th>
                <td>{{ field }}</td>
            </tr>
            {% endfor %}
        </table>
        <button type="submit" class="btn btn-lg btn-warning">Submit</button>
    </form>
</center>
{% endblock %}
{% block footer %}
    <script type="text/javascript" src="/staticfiles/admin/js/vendor/jquery/jquery.js"></script>
    {{ form.media }}
{% endblock %}

Rendered template picture: Rendered template code:

<head>
  <meta charset="utf-8">
  <title>C3T</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- JS -->
    <script type="text/javascript" src="/staticfiles/admin/js/vendor/jquery/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="/staticfiles/css/base.css">

</head>

<body>
  <header>
    <!-- Fixed navbar -->
    <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4\
     mb-3 bg-white border-bottom shadow-sm">
    </div>
  </header>
  <div class="container">

<center>
    <h1>Create Knowledge</h1>

    <form method="POST" enctype="multipart/form-data">
        <input type="hidden" name="csrfmiddlewaretoken" value="f3y4QJX4fjYAJqqcZbhWhSmud6aTTC5GvI3WsZkIBU6Tc1iUxN36AmfbFwI99xMT">
        <table class="w-50 table table-light">

            <tbody><tr>
<!-- omitted other fields for brevity 
                <th>Tags</th>
                <td><select name="ccs_tag" required="" id="id_ccs_tag" data-autocomplete-light-language="en" data-autocomplete-light-url="/taggit-autocomplete/" data-autocomplete-light-function="select2" data-tags="," multiple="">
</select></td>
            </tr>
        </tbody></table>
        <button type="submit" class="btn btn-lg btn-warning">Submit</button>
    </form>
</center>
  </div>
</body>

Any ideas as to where I'm going wrong with this?

wchesley commented 3 years ago

So after more stumbling around, I figured this out...I was under the impression that {{ form.media }} would bring in all the required scripts, but this was not the case. Instead I compared the HTML of the admin form to that of my user facing form and manually added in the scripts. Scripts I added are as follows:

<script src="/admin/jsi18n/"></script>
<link href="/staticfiles/admin/css/vendor/select2/select2.css" type="text/css" media="screen" rel="stylesheet">
<link href="/staticfiles/admin/css/autocomplete.css" type="text/css" media="screen" rel="stylesheet">
<link href="/staticfiles/autocomplete_light/select2.css" type="text/css" media="screen" rel="stylesheet">
<script src="/staticfiles/admin/js/vendor/select2/select2.full.js"></script>
<script src="/staticfiles/admin/js/jquery.init.js"></script>
<script src="/staticfiles/autocomplete_light/autocomplete_light.js"></script>
<script src="/staticfiles/autocomplete_light/select2.js"></script>

Marking this issue as closed.

arielaco commented 2 years ago

Bumping this, it was the reason I couldn't get django_filters to work.

yourlabs / django-autocomplete-light

TaggitSelect2 rendered as blank select box outside of admin #1202