jquery - 如何以 ajax 形式将 Django 媒体 javascript 即时添加到小部件中？

Question

我无法让我的小部件媒体 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。

救命!

Answer 1

没关系!这按预期工作 - 我只是没有检查 JS 的 ajaxed 头。我的小部件似乎无法工作，因为它们被 Bootstrap 对话框覆盖了。将他们的 z-index 增加到 10000，一切正常。