Home > Software design >  Django autocomplete light Select2 widget not appearing
Django autocomplete light Select2 widget not appearing

Time:11-22

I have been following the DAL tutorial and can access a json object at

http://127.0.0.1:8000/entry/river-autocomplete/?q=S

So i know my view is working. Beyond that I cannot seem to get anything but the standard widget for ForignKey. From looking at the following posts in stackoverflow I feel that some static files or javascript libraries are not loading properly but for the life of me I cannot figure out how to fix this.

django-autocomplete-light template not rendering autocomplete widget

django-autocomplete-light displays empty dropdown in the form

Below are all of the files that I think pertain to this issue. If I can clarify things any further please let me know.

views.py (edit added full views.py)

class CreateEntry(LoginRequiredMixin, generic.CreateView):
    fields = ('date', 'river', 'flow', 'description', 'public')
    model = JournalEntry


    def form_valid(self, form):
        self.object = form.save(commit=False)
        self.object.user = self.request.user
        self.object.save()
        return super().form_valid(form)

    def get_success_url(self):
        return reverse_lazy('home')

#autocomplete view
class RiverAutocomplete(autocomplete.Select2QuerySetView):
    def get_queryset(self):
        #User filtering code goes here
        if not self.request.user.is_authenticated:
            return River.objects.none()
        
        qs = River.objects.all()

        if self.q:
            qs = qs.filter(river_name__istartswith=self.q)
        return qs

settings.py

INSTALLED_APPS = [
    'dal',
    'dal_select2',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'journal',
    'accounts',
    'bootstrap5',
    'django.contrib.admin',
]

models.py

class River(models.Model):
    river_name = models.CharField(max_length=50)
    aw_id = models.CharField(max_length=20)
    state = models.CharField(max_length=5) 

    def __str__(self):
        return "{river}".format(river=self.river_name)


class JournalEntry(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    date = models.DateField()
    river = models.ForeignKey("River", on_delete=models.CASCADE)
    flow = models.FloatField()
    description = models.TextField(max_length=250)
    public = models.BooleanField(default=False)
    # picture = models.ImageField()

    def __str__(self):
        return "{river}--{date}".format(river=self.river, date=self.date)

forms.py

from django import forms
from . import models
from .widgets import FengyuanChenDatePickerInput
from dal import autocomplete

class JournalForm(forms.ModelForm):
    date = forms.DateField(input_formats=['%m/%d/%Y'], widget=FengyuanChenDatePickerInput())
    river = forms.ModelChoiceField(
        queryset=models.River.objects.all(),
        widget=autocomplete.ModelSelect2(url='journal:river-autocomplete'))

    class Meta:
        model = models.JournalEntry
        fields = ("__all__")

urls.py

from django.urls import path
from django.conf.urls import url

from . import views

app_name='journal'

urlpatterns = [
    ...
    ...
    #autocomplete view
    url(r'^river-autocomplete/$', views.RiverAutocomplete.as_view(model=River, create_field='name'), name='river-autocomplete'),
   
]

html

{% extends "base.html" %}
{% load static %}
{% block content %}

<div class="container">
    <h1>New Entry:</h1>

    
    <form method="post">
      
      {% csrf_token %}
        <h3>Date:</h3>
        {{ form.date}}
        <h3>River:</h3>
        {{ form.river }}
        <h3>Flow:</h3>
        {{ form.flow }}
        <h3>Description:</h3>
        {{ form.description }}
        <h4>Public:  {{ form.public }}</h4>

        
        <input type="submit" value="Save">
      

      
  </form>
</div>

{% endblock %}

{% block footer %}
<!-- DAL -->
<script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>

{{ form.media }}

<script>
  (function($) {
      $('#id_river').click(function() {
          var index = $('#id_inline_test_models-TOTAL_FORMS').val()
          var newTable = $('#id_inline_test_models-__prefix__-DELETE').parents('table').clone()
          newTable.find(':input').each(function() {
              for (attr of ['name', 'id'])
                  $(this).attr(
                      attr,
                      $(this).attr(attr).replace('__prefix__', index)
                  )
          })
          newTable.insertBefore($(this))
          $('#id_inline_test_models-TOTAL_FORMS').val(
              parseInt($('#id_inline_test_models-TOTAL_FORMS').val())   1
          )
          newTable.slideDown()
      })
  })($)
  </script>

<!-- Datepicker  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js" integrity="sha256-/7FLTdzP6CfC1VBAj/rsp3Rinuuu9leMRGd354hvk0k=" crossorigin="anonymous"></script>

<script>
  $(function () {
    $("#id_date").datepicker({
      format:'dd/mm/yyyy',
    });
  });
</script>

{% endblock %}

base.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>American Whitewater Journal</title>
        

        <!-- Latest compiled and minified CSS -->
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        
        
        <!-- jQuery -->
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
        


        <!-- Fengyuan Chen's Datepicker -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css" integrity="sha256-b88RdwbRJEzRx95nCuuva hO5ExvXXnpX 78h8DjyOE=" crossorigin="anonymous" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js" integrity="sha256-/7FLTdzP6CfC1VBAj/rsp3Rinuuu9leMRGd354hvk0k=" crossorigin="anonymous"></script>
    </head>
    <body>
        <nav  style="background-color: #238c91" role="navigation" id="navbar">
      ...
      ...
      ...
    </nav>
        <div >
            {% block content %}

            {% endblock %}
            {% block footer %}
            {% endblock %}
        </div>


    </body>
</html>

I have tried to use the exact {% block content %} that is in the tutorial without a differing result. Any help would be much appreciated.

Second question: I am pretty new to posting on stackoverflow and wonder if anybody has a good rule of thumb about how many hours one should spend researching and trying on your own before you post a question?

CodePudding user response:

You are not passing your form class to the view, just passing fields means that the form you are using is just an auto-generated ModelForm without your custom widget

class CreateEntry(LoginRequiredMixin, generic.CreateView):
    model = JournalEntry
    form_class = JournalForm

    ...
  • Related