Django Admin FilteredSelectMultiple 小部件选择不起作用答案

【问题标题】：Django Admin FilteredSelectMultiple Widget selection doesn't workDjango Admin FilteredSelectMultiple 小部件选择不起作用
【发布时间】：2021-09-15 20:23:18
【问题描述】：

我正在尝试使用管理小部件库中的 FilteredSelectMultiple 小部件。我能够让小部件显示在网页上。但是，我无法获得将选择移至“已选择”框的按钮。

这是我的代码：

forms.py

from django.contrib.admin.widgets import FilteredSelectMultiple
from .models import *
from django import forms

# Create your views here.
class ExampleForm(forms.Form):
    example_selector =  forms.ModelMultipleChoiceField(queryset=Example.objects.all(), widget=FilteredSelectMultiple("Example", is_stacked=False))
    class Media:
                css = {
                    'all': ('/static/admin/css/widgets.css',),
                }
                js = ('/admin/jsi18n',)

    class Meta:
        model = Example

models.py

from django.db import models

# Create your models here. 
class Example(models.Model):
        example_id = models.AutoField(primary_key=True)
        example_name = models.CharField(max_length=45, blank=False, null=False)
    
        def __str__(self):
            return self.example_name

index.html

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>

</head>
<body>
    {{example.as_p}}

<script src="/static/admin/js/vendor/jquery/jquery.js"></script>
<script src="/static/admin/js/jquery.init.js"></script>
<script src="/static/admin/js/SelectFilter2.js"></script>
    {{example.media}}
</body>
</html>

url.py

from django.contrib import admin
from django.urls import path, include
from django import views as django_views
from django.conf.urls import url

urlpatterns = [
    path('admin/', admin.site.urls),
    path('example/', include('example.urls')),
    url(r'^jsi18n/$', django_views.i18n.JavaScriptCatalog.as_view(), name='jsi18n'),
]

我检查了浏览器控制台，当我尝试点击按钮时，出现以下错误：

Uncaught TypeError: Cannot read property 'addEventListener' of null
at Object.init (VM427 SelectFilter2.js:148)
    at VM427 SelectFilter2.js:233
    at NodeList.forEach (<anonymous>)
    at VM427 SelectFilter2.js:231
init @ SelectFilter2.js:148
(anonymous) @ VM427 SelectFilter2.js:233
(anonymous) @ VM427 SelectFilter2.js:231
load (async)
(anonymous) @ VM427 SelectFilter2.js:230

我还验证了必要的css和js文件，如下所示：

【问题讨论】：

标签： jquery django django-admin typeerror django-widget

【解决方案1】：

{{form.media}}

结果在我的情况下：

<script src="/static/admin/js/core.js"></script>
<script src="/admin/jsi18n/"></script>
<script src="/static/admin/js/SelectBox.js"></script>
<script src="/static/admin/js/SelectFilter2.js"></script>

我也不使用你的网址：

url(r'^jsi18n/$', django_views.i18n.JavaScriptCatalog.as_view(), name='jsi18n'),

这绝对是 jquery 的问题。我还在模板库中手动加载 jquery，所以在 gnereted 页面的源视图中我也有：

  <script src="/static/js/jquery.min.js"></script>
  <link rel="stylesheet" href="/static/css/widgets_group_form.css">

应该这样做。我还包括 bootstrap4（不知道是否需要）和 popper。

可能是导入（它不会按时加载）

【讨论】：

我试过这段代码。不幸的是，这对我不起作用。
我可以说，当我第一次尝试使用这个小部件时，我也遇到了很多问题。主要是 css 和 jquery。我的 widgets_group_form.css 只是管理小部件的副本，其中元素的高度/宽度值发生了变化