Search code examples
javascriptdjangodjango-widget

Implementing Django FilteredSelectMulitple into none admin form

I'm trying to implement the Django widget FilteredSelectMultiple into a non-admin form and although it displays, when loading I get a JavaScript error in console. The error is

TypeError: node.tagName is undefined SelectFilter2.js:11:9

If I then select items from the list I get the following JavaScript error in console

TypeError: cache is undefined SelectBox.js:76:29

This is my Django form

class PlaylistForm(forms.ModelForm): 
    class Meta:
        model = Playlist
        exclude = ['id']
        widgets = {
            'owner' : forms.HiddenInput(),
            'name' : forms.TextInput (
                attrs={
                    'class' : 'form-control',
                    'placeholder' : _('Playlist Title'),
                    'label' : _('Playlist Title')}),
            'projects' : FilteredSelectMultiple ('Items', is_stacked=True, attrs = {'class' : 'form-control'})
        }
    class Media:
        css = {
            'all': (os.path.join(settings.BASE_DIR, '/static/admin/css/widgets.css'),),
        }
        js = (
            '/admin/jsi18n/',
            )

This is the view

class CreatePlaylistView (LoginRequiredMixin, CreateView):
    model = Playlist
    form_class = PlaylistForm

And this is the template additions

<script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/jquery.init.js' %}"></script>
<script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
{{ form.media }}

And I included this is urls.py based on some other posts

path('jsi18n/', JavaScriptCatalog.as_view(), name='javascript-catalog'),

What have I got wrong?

EDIT

I've looked at this some more and I get different browser errors in Chrome from Firefox.. Firefox is in the post above.

Initital Chrome error was 

TypeError: jQuery.easing[jQuery.easing.def] is not a function 
SyntaxError: Unexpected token <
SyntaxError: Unexpected token <
ReferenceError: interpolate is not defined

I added <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script> to the template but still get the remaining console errors

Solution

  • Just realised the issue. Problem is that I hadn't wrapped the {{ form }} within <form> tags because I was just testing as I went