Django Admin FilteredSelectMultiple Widget selection doesn't work

Question

I am trying to use the FilteredSelectMultiple widget from the admin widgets library. I was able to get the widget displayed on the web page. However, I cannot get the buttons to move the selections to the Chosen box.

Here is my code:

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'),
]

I've checked the browser console and when I try to click on the buttons I get the following error:

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

I have also verified the necessary css and js files, it looks like as follows:

score 1 · Answer 1 · answered Jul 05 '21 at 05:28

{{form.media}}

results in my case in:

<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>

also i don't use your's url:

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

This is definitly problem with jquery. I also load manualy jquery in template base so in source view of gnereted page i also have :

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

That should do it. I also include bootstrap4 (dont know if its needed) and popper.

maybe plcement of import(it don't load on time)

I can tell that when i first try to use this widget i have many problems too.. and it was mainly with css and jquery. my widgets_group_form.css is just copy of admin widgets with changed values of hight/width of elements — Waldemar Podsiadło, Jul 05 '21 at 06:38

Django Admin FilteredSelectMultiple Widget selection doesn't work

1 Answers1