2

我无法让我的小部件媒体 JS 以我的 AJAXed 形式呈现。只有我的小部件的 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。

帮助！

4

1 回答 1

0

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

于 2013-08-09T15:01:55.750 回答