7

この質問は関連しています

Django: Javascript をカスタム ウィジェットに追加する最良の方法

しかし、同じではありません。

元の質問は、カスタム django ウィジェットにサポートする JavaScript を追加する方法を尋ねており、答えは を使用することforms.Mediaですが、その解決策は私にはうまくいきません。私の例はこれです：

ウィジェットは、フォームにレンダリングされると、(おもちゃの例) 次のような行を作成します。

<div id="some-generated-id">Text here</div>

ここで、出力に追加したいのは、次のような別の行です。

<script>
$('#some-generated-id').datetimepicker(some-generated-options)
</script>

最初のアイデアは、ウィジェットがレンダリングされるときに と の両方がレンダリングされるというものですがdiv、scriptそれは機能しません。問題は、htmlドキュメントの構造が次のようになっていることです。

-body
    - my widget
    - my widget's javascript
-script
    -calls to static files (jQuery, datetimepicker,...)

ウィジェットの JavaScript コードがブラウザーに読み込まれる時点では、jQuery および datetimepicker js ファイルはまだ読み込まれていません (ドキュメントの最後に読み込まれます)。

を使用してこれを行うことはできませんMedia。生成するオプションと ID は関数にとって不可欠であるためです。これを解決する最善の方法は何ですか?

4

4 に答える 4

0

JS を次のように初期化する必要があります。

<script type="text/javascript">
$( document ).ready(function() {
    var some-generated-options = {};
    $('#some-generated-id').datetimepicker(some-generated-options);
});
</script>

あなたのように、私は次のようなカスタムウィジェットを所有していました:

class DaysInput(TextInput):
    def render(self, name, value, attrs=None):
        result = super(DaysInput, self).render(name, value, attrs)
        return u"""
            %s
            <script type="text/javascript">
            $( document ).ready(function() {
                $('a.id_days').click(function(e){
                    e.preventDefault();
                    $('input#id_days').val($(e.currentTarget).attr('attr-value'));
                });
            });
            </script>
            <a href="#" class="id_days" attr-value='1'>1d</a>
            <a href="#" class="id_days" attr-value='2'>2d</a>
            <a href="#" class="id_days" attr-value='3'>3d</a>
        """ % result


class TestForm(forms.ModelForm):
    days = forms.IntegerField(widget=DaysInput())
于 2015-08-26T15:50:50.970 に答える