问题描述
我正在尝试创建一个使用两个不同小部件的表单:
I am trying to create a form which uses two different widgets:
- some fields are using django-automplete-light ModelSelect2 widget
- another field is using bootstrap_datepicker_plus DatePickerInput widget
但是,我无法使它们同时起作用:当我仅使用DatePickerInput创建表单时,日历会正确显示,但是当我使用ModelSelect2添加字段时,日历将不再弹出.
However, I can't manage to make them both work: when I create a form with DatePickerInput only, the calendar shows correctly, but when I add fields using ModelSelect2, the calendar doesn't popup anymore.
有人知道什么可能导致此问题以及如何解决吗?
Does anybody know what could cause this problem and how to solve it?
在settings.py中,我为BOOTSTRAP4设置了'include_jquery'= True下面是表单代码的一部分:
In settings.py I set 'include_jquery' = True for BOOTSTRAP4Below is an extract of the form code:
from django.forms import ModelForm
from dal import autocomplete
from bootstrap_datepicker_plus import DatePickerInput
class CreateWhoForm(ModelForm):
class Meta:
model = m.Who
fields = (
'why',
'how',
'begins'
)
widgets = {
# when 'why' and 'how' are commented, DatePickerInput() calendar widget shows correctly
# when they are present, the calendar widget doesn't show anymore
'why': autocomplete.ModelSelect2(
url='core:why-autocomplete'
),
'how': autocomplete.ModelSelect2(
url='core:how-autocomplete'
),
'begins': DatePickerInput()
}
以及一些使用的html:
And some of the html used:
<pre>
{% load static %}
{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
{{ form.media }}
{% for field in form %}
<div class="form-group{% if field.errors %} has-error{% endif %}">
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
{% render_field field class="form-control" placeholder=field.help_text %}
{% for error in field.errors %}
<p class="help-block">{{ error }}</p>
{% endfor %}
</div>
{% endfor %}
</pre>
推荐答案
我遇到了同样的问题,并且多次初始化JQuery似乎是一个问题.由于您是通过Bootstrap加载到JQuery中,而JQuery中的Autocomplete-light加载也是,因此似乎存在冲突.删除static/automplete_light/jquery.init.js似乎可以解决此问题.
I had the same problem and it appears to be an issue with initializing JQuery multiple times. Since you are loading in JQuery with Bootstrap and Autocomplete-light loads in JQuery also, there appears to be a conflict. Deleting static/automplete_light/jquery.init.js appears to fix the problem.
这篇关于使用django-autocomplet-light和bootstrap-datepicker-plus小部件创建表单时出现问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!