Django ModelMultipleChoiceField小部件未渲染

本文介绍了Django ModelMultipleChoiceField小部件未渲染的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试使用内置的django管理员小部件 ModelMultipleChoiceField 以如下形式呈现此类内容:

我已在

此外，在页面加载时，会出现以下错误:

未捕获的ReferenceError:未在(index):1665定义addEvent

以下是导致错误的 index 中的行:

< script type ="text/javascript">addEvent(window，"load"，function(e){SelectFilter.init("id_employee_selection"，"__unicode__"，0，"/static/admin/");});</script>

即使在某些Django addEvent.js .="nofollow noreferrer">门票.

作为参考，下面是我的 form 和 HTML

FORM:

Django导入表单中的

类EventAttendeesForm(forms.Form):从employee.models导入Employee从django.contrib.admin.widgets导入FilteredSelectMultiple员工选择=表格.模型多重选择场(queryset = Employee.objects.all()，widget = FilteredSelectMultiple("__ unicode__"，is_stacked = False，attrs = {'rows':20}))def __init __(self，* args，** kwargs):超级(EventAttendeesForm，self).__ init __(* args，** kwargs)self.fields ['employee_selection'].label =雇员"

HTML片段:

< link href ="/static/admin/css/widgets.css" type ="text/css" media ="all" rel ="stylesheet"/>< script type ="text/javascript" src ="/jsi18n/"></script>< script type ="text/javascript" src ="/static/admin/js/jquery.init.js"></script>< form method ='POST'action =''enctype ='multipart/form-data'> {％csrf_token％}{{ 形式 }}< input type ='submit'value ='Add Item(s)'/></form>{{ 媒体 }}

如何正确呈现 ModelMultipleChoiceField 小部件?

我已经尝试过 hack ，但是它不起作用./p>

非常感谢.

解决方案

弄清楚了:在加载表单之前先加载所有 form.media 和相关的javascript，这一点至关重要.

所以，而不是:

< link href ="/static/admin/css/widgets.css" type ="text/css" media ="all" rel ="stylesheet"/>< script type ="text/javascript" src ="/jsi18n/"></script>< script type ="text/javascript" src ="/static/admin/js/jquery.init.js"></script>< form method ='POST'action =''enctype ='multipart/form-data'> {％csrf_token％}{{ 形式 }}< input type ='submit'value ='Add Item(s)'/></form>{{ 媒体 }}

执行此操作(将脚本+ form.media 放在 form 之前:

< script type ="text/javascript" src ="/jsi18n/"></script>< script type ="text/javascript" src ="/static/admin/js/jquery.min.js"></script>< script type ="text/javascript" src ="/static/admin/js/jquery.init.js"></script>{{ 媒体 }}< form method ='POST'action =''enctype ='multipart/form-data'> {％csrf_token％}{{ 形式 }}< input type ='submit'value ='Add Item(s)'/></form>

I am trying to use the built-in django admin widget ModelMultipleChoiceField to render something like this in a form:

I have followed others' recommendations here, and have reviewed the documentation. but I am getting a half-complete widget; only one box is showing, and all of the associated buttons don't appear:

In addition, when the page loads, the following error is given:

Uncaught ReferenceError: addEvent is not defined at (index):1665

Here is the line within index that is causing the error:

<script type="text/javascript"> addEvent(window, "load", function(e) {SelectFilter.init("id_employee_selection", "__unicode__", 0, "/static/admin/"); }); </script>

I cannot find addEvent.js anywhere within the django library, even though it is referenced on some django tickets.

For reference, below are my form and HTML

FORM:

from django import forms class EventAttendeesForm(forms.Form): from employees.models import Employee from django.contrib.admin.widgets import FilteredSelectMultiple employee_selection = forms.ModelMultipleChoiceField( queryset=Employee.objects.all(), widget=FilteredSelectMultiple("__unicode__", is_stacked=False, attrs={'rows':20}) ) def __init__(self, *args, **kwargs): super(EventAttendeesForm, self).__init__(*args, **kwargs) self.fields['employee_selection'].label = "Employees"

HTML SNIPPET:

<link href="/static/admin/css/widgets.css" type="text/css" media="all" rel="stylesheet" /> <script type="text/javascript" src="/jsi18n/"></script> <script type="text/javascript" src="/static/admin/js/jquery.init.js"></script> <form method='POST' action='' enctype='multipart/form-data'>{% csrf_token %} {{ form }} <input type='submit' value='Add Item(s)' /> </form> {{ media }}

How can I correctly render the ModelMultipleChoiceField widget?

I have tried this hack but it doesn't work.

Many thanks in advance.

解决方案

Figured it out: it is critical to have all form.media and associated javascripts load before the form loads.

So, instead of:

<link href="/static/admin/css/widgets.css" type="text/css" media="all" rel="stylesheet" /> <script type="text/javascript" src="/jsi18n/"></script> <script type="text/javascript" src="/static/admin/js/jquery.init.js"></script> <form method='POST' action='' enctype='multipart/form-data'>{% csrf_token %} {{ form }} <input type='submit' value='Add Item(s)' /> </form> {{ media }}

Do this (scripts + form.media placed before form:

<script type="text/javascript" src="/jsi18n/"></script> <script type="text/javascript" src="/static/admin/js/jquery.min.js"></script> <script type="text/javascript" src="/static/admin/js/jquery.init.js"></script> {{ media }} <form method='POST' action='' enctype='multipart/form-data'>{% csrf_token %} {{ form }} <input type='submit' value='Add Item(s)' /> </form>