如何以 ajaxed 形式将 Django 媒体 javascript 动态添加到小部件？答案

【问题标题】：how to add Django media javascript on the fly to a widget in an ajaxed form?如何以 ajaxed 形式将 Django 媒体 javascript 动态添加到小部件？
【发布时间】：2013-08-10 22:52:49
【问题描述】：

我无法让我的小部件媒体 JS 以我的 AJAX 格式呈现。只有我的小部件的 CSS 被渲染。如何让 JS 呈现每个小部件？不想把它粘在我的基本模板头上，只是让它在每个页面上等待，以防它需要被调用。我还想利用 widget.Media 类来加载 JS，而不是在我的 ajaxed 表单模板中的某个地方粘贴脚本标签。

我有一个自定义的 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 的脚本标签来加载我的 datepicker JS。

救命！

【问题讨论】：

timepicker.css 来自哪里？您确定您使用的是正确的小部件吗？
我同时使用了bootstrap-datepicker 和bootstrap-timepicker，但为了简洁起见，我在示例中只使用了日期选择器。 timepicker.css 来自TBSTimeInput 小部件，它在Media 内部类css 中被引用，就像在我的TBSDateInput 中引用datepicker.css 一样。我相信正在使用正确的小部件，因为在页面加载时一切正常。我的小部件中的 ajaxing 给我带来了问题。

标签： jquery python ajax django twitter-bootstrap

【解决方案1】：

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

【讨论】：