How to properly render FilteredSelectMultiple
django, django-forms, django-templates, javascript, python
Solution
The admin JS widgets all have a dependency on the JSI18N script. Add this to in your template header:
<script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
Edit: Looks like you also need the jquery.init.js from static/admin/js, as jQuery is being namespaced to avoid conflicts and isn't passed to the SelectFilter2 script automatically.
Problem
I'm using FilteredSelectMultiple widget, but it just doesn't wanna look like the one in the admin. The Javascript console show ``` Uncaught TypeError: undefined is not a function SelectFilter2.js:100 ``` My form (the imported widget: django.contrib.admin.widgets.FilteredSelectMultiple) ``` class GroupPermissionForm(forms.ModelForm): permissions = forms.ModelMultipleChoiceField( queryset=Permission.objects.all(), widget=FilteredSelectMultiple("verbose name", is_stacked=False) ) class Meta: model = Group fields = ('permissions', ) ``` The template ``` {{ group_perm_form.media }} <form> {{ group_perm_form.permissions }} </form> ``` (I've tried {{ group_perm_form }} too but it didn't work, much to my surprise tho when I rendered the form with crispy I could filter the select input, however it was still broken up) The order of my javascript files are the following: ``` jquery django.js form.media ``` This is the result btw edit: the working template looks like this ``` <script type="text/javascript" src="/static/admin/js/jquery.min.js"></script> <script type="text/javascript" src="/static/admin/js/jquery.init.js"></script> {{ group_perm_form.media }} <form> {{ group_perm_form.permissions }} </form> <link rel="stylesheet" type="text/css" href="/static/admin/css/widgets.css" /> ```