Django 自动完成灯 Select2 小部件未出现
Django autocomplete light Select2 widget not appearing
我一直在关注 DAL tutorial 并且可以在
访问 json 对象
http://127.0.0.1:8000/entry/river-autocomplete/?q=S
所以我知道我的观点是有效的。除此之外，除了 ForignKey 的标准小部件，我似乎什么也得不到。通过查看 Whosebug 中的以下 posts，我觉得一些静态文件或 javascript 库没有正确加载，但对于我来说，我无法弄清楚如何解决这个问题。
以下是我认为与此问题有关的所有文件。如果我可以进一步澄清事情，请告诉我。
views.py（编辑加全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/bootstrap@5.0.2/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 class="navbar navbar-expand-lg navbar-light mynav" style="background-color: #238c91" role="navigation" id="navbar">
...
...
...
</nav>
<div class="container">
{% block content %}
{% endblock %}
{% block footer %}
{% endblock %}
</div>
</body>
</html>
我已经尝试使用教程中的 {% block content %}，但没有得到不同的结果。任何帮助将不胜感激。
第二个问题：我对 post 在 Whosebug 上还很陌生，想知道是否有人对在你之前应该花多少时间自己研究和尝试有一个很好的经验法则 post 有问题吗？
您没有将表单 class 传递给视图，仅传递字段意味着您正在使用的表单只是一个自动生成的 ModelForm，没有您的自定义小部件
class CreateEntry(LoginRequiredMixin, generic.CreateView):
model = JournalEntry
form_class = JournalForm
...
我一直在关注 DAL tutorial 并且可以在
访问 json 对象http://127.0.0.1:8000/entry/river-autocomplete/?q=S
所以我知道我的观点是有效的。除此之外，除了 ForignKey 的标准小部件，我似乎什么也得不到。通过查看 Whosebug 中的以下 posts，我觉得一些静态文件或 javascript 库没有正确加载，但对于我来说，我无法弄清楚如何解决这个问题。
以下是我认为与此问题有关的所有文件。如果我可以进一步澄清事情，请告诉我。
views.py（编辑加全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/bootstrap@5.0.2/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 class="navbar navbar-expand-lg navbar-light mynav" style="background-color: #238c91" role="navigation" id="navbar">
...
...
...
</nav>
<div class="container">
{% block content %}
{% endblock %}
{% block footer %}
{% endblock %}
</div>
</body>
</html>
我已经尝试使用教程中的 {% block content %}，但没有得到不同的结果。任何帮助将不胜感激。
第二个问题：我对 post 在 Whosebug 上还很陌生，想知道是否有人对在你之前应该花多少时间自己研究和尝试有一个很好的经验法则 post 有问题吗？
您没有将表单 class 传递给视图，仅传递字段意味着您正在使用的表单只是一个自动生成的 ModelForm，没有您的自定义小部件
class CreateEntry(LoginRequiredMixin, generic.CreateView):
model = JournalEntry
form_class = JournalForm
...