2

ウィジェット メディア JS を AJAX フォームでレンダリングすることができません。私のウィジェットの CSS だけがレンダリングされます。ウィジェットごとに JS をレンダリングするにはどうすればよいですか? 基本テンプレートの頭に貼り付けて、呼び出される必要がある場合に備えて各ページで待機する必要はありません。また、widget.Media クラスを使用して JS をロードし、ajax されたフォーム テンプレートのどこかにスクリプト タグを貼り付けないようにしたいと考えています。

次のように、コンポーネントの入力ウィジェットに twitter-bootstrap クラス/JS を追加して変更したカスタム Django SplitDateTimeWidgetがあります。

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 ヘッドに含まれていれば問題なく動作しますが、ウィジェットのメディアを (twitter-bootstrap モーダルで) ajaxed フォームに追加しようとすると、次のような JS ではなく CSS だけが取得されます。それで：

{% 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 リンクを取得しますが、datepicker JS をロードするための JS を含むスクリプト タグは取得しません。

ヘルプ！

4

1 に答える 1

0

どうでも！これは期待どおりに機能していました.JSのajaxed headをチェックしていませんでした. そして、私のウィジェットは、ブートストラップ ダイアログでカバーされているため、機能していないように見えました。z-indexそれらを10000に増やし、すべてが機能します。

于 2013-08-09T15:01:55.750 に答える