我无法让我的小部件媒体 JS 以 AJAX 形式呈现。只有我的小部件的 CSS 被渲染。如何让 JS 渲染每个小部件?不想把它粘在我的基本模板头上,只是让它在每个页面上等待,以防需要被调用。我还想利用 widget.Media 类来加载 JS,而不是将脚本标签粘贴在我的 ajax 表单模板中的某处。
我有一个自定义的 Django SplitDateTimeWidget我通过将 twitter-bootstrap 类/JS 添加到它的组件输入小部件来进行修改,如下所示:
class TBSSplitDateTimeWidget(widgets.MultiWidget):
"""
A Widget that splits datetime input into two <input type="text"> boxes.
"""
def __init__(self, attrs=None, date_format=None, time_format=None):
widgets = (TBSDateInput(attrs=attrs, format=date_format),
TBSTimeInput(attrs=attrs, format=time_format))
super(TBSSplitDateTimeWidget, self).__init__(widgets, attrs)
TBSDateInput
如下所示:
class TBSDateInput(widgets.DateInput):
"""
Renders a Twitter Bootstrap Date Input.
"""
class Media:
css = {'all': ('js/datepicker/css/datepicker.css',)}
js = (
'js/datepicker/js/bootstrap-datepicker.js',
'js/jquery.watermark.min.js',
'js/myapp/datepicker.js',
)
def render(self, name, value, attrs=None):
if value is None: value = ''
final_attrs = self.build_attrs(attrs, type="text", name=name)
if final_attrs.get('class'):
final_attrs['class'] = final_attrs['class'] + ' input-small'
if final_attrs.get('disabled'):
datepicker_css_class = 'input-append'
else:
datepicker_css_class = 'input-append date'
# only add value attribute if value is non-empty
final_attrs['value'] = value
html = '''
<div class="{1}" data-date-format="mm-dd-yyyy">
<input{0} />
<span class="add-on">
<i class="icon-th"></i>
</span>
</div>
'''
return mark_safe(html.format(flatatt(final_attrs), datepicker_css_class))
如果它在初始页面加载时包含在 DOM 头中,它就可以正常工作,但是当我尝试将小部件的媒体添加到 ajaxed 表单(在 twitter-bootstrap 模式中)时,我得到的只是 CSS,而不是JS,就像这样:
{% block form %}
{{ formset.form.media }}
{% crispy formset formset.form.helper %}
{% endblock %}
给我:
<div class="modal-body">
<link rel="stylesheet" media="all" type="text/css" href="/static/js/datepicker/css/datepicker.css">
<link rel="stylesheet" media="all" type="text/css" href="/static/js/timepicker/compiled/timepicker.css">
<form class="form-inline" method="post">
...
我得到了 CSS 链接,但没有带有 JS 的脚本标签来加载我的日期选择器 JS。
救命!
最佳答案
没关系!这按预期工作 - 我只是没有检查 JS 的 ajaxed 头。我的小部件似乎无法工作,因为它们被 Bootstrap 对话框覆盖了。将他们的 z-index
增加到 10000,一切正常。
关于jquery - 如何以 ajax 形式将 Django 媒体 javascript 即时添加到小部件中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18139365/