Django ModelMultipleChoiceField 小部件未呈现

Posted 2023-02-24

【中文标题】Django ModelMultipleChoiceField 小部件未呈现

【英文标题】：Django ModelMultipleChoiceField Widget not Rendering

【发布时间】：2017-09-11 03:44:21

【问题描述】：

我正在尝试使用内置的 django 管理小部件 ModelMultipleChoiceField 在表单中呈现类似的内容：

我已遵循其他人的建议here，并查看了documentation。但我得到了一个半完整的小部件；只显示一个框，并且所有关联的按钮都没有出现：

另外，页面加载时，报如下错误：

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

这是index 中导致错误的行：

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

我在 django 库中的任何地方都找不到 addEvent.js，即使它在某些 django tickets 上被引用。

供参考，下面是我的form和html

表格：

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 片段：

<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 

如何正确呈现ModelMultipleChoiceField 小部件？

我试过这个hack，但它不起作用。

非常感谢。

【参考方案1】：

想通了：在表单加载之前加载所有 form.media 和相关的 javascripts 至关重要。

所以，而不是：

<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 

执行此操作（脚本 + 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>

 media 

<form method='POST' action='' enctype='multipart/form-data'>% csrf_token %
 form 
<input type='submit' value='Add Item(s)' />
</form>