Question

这个问题与

有关

Django: Best Way to Add Javascript to Custom Widgets

但不一样。

原始问题询问如何将支持javascript添加到自定义django小部件，答案是使用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对于函数至关重要。解决这个问题的最佳方法是什么？

Answer 1

由于JavaScript是嵌入式脚本，因此您将需要使用原生DOMContentLoaded事件来等待jQuery加载。

<script>
    window.addEventListener('DOMContentLoaded', function() {
        (function($) {
            $('#some-generated-id').datetimepicker(some-generated-options);
        })(jQuery);
    });
</script>

或者，如果可以将代码放入外部脚本文件中，则可以使用defer标签的script属性。

<script src="myfile.js" defer="defer"></script>

请参见MDN。

Answer 2

来自docs：

将资产插入DOM的顺序通常很重要。例如，您可能有一个依赖jQuery的脚本。因此，组合Media对象会尝试保留每个Media类中定义资产的相对顺序。

考虑以下示例：

class FooWidget(forms.TextInput):
    class Media:
        js = ('foo.js',)

class BarWidget(forms.TextInput):
    class Media:
        js = ('bar.js',)

class SomeForm(forms.Form):
    field1 = forms.CharField(widget=BarWidget)
    field2 = forms.CharField(widget=FooWidget)

    def __init__(self, *args, **kwargs):
        super(SearchForm, self).__init__(*args, **kwargs)

现在，当您调用form.media时，脚本将如下所示：

<script type="text/javascript" src="/static/bar.js"></script>
<script type="text/javascript" src="/static/foo.js"></script>

为什么bar.js在foo.js之前渲染？因为django根据它们在表单中被调用的顺序来渲染它们，所以不是定义类的顺序。如果要在此示例中更改顺序，只需交换位置{{ 1}}和field1中的field2。

这如何帮助您使用jQuery？您可以通过自定义窗口小部件呈现jQuery CDN脚本：

SomeForm

现在您的class FooWidget(forms.TextInput): class Media: js = ('https://code.jquery.com/jquery-3.4.1.js', 'foo.js',) class BarWidget(forms.TextInput): class Media: js = ('https://code.jquery.com/jquery-3.4.1.js', 'bar.js',)将如下所示：

form.media

注意<script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script type="text/javascript" src="/static/bar.js"></script> <script type="text/javascript" src="/static/foo.js"></script>没有附加到jQuery CDN吗？这是因为/static/属性检查给定的文件路径是包含.media还是http，并且仅将https设置附加到相对的文件路径。

还要注意，重复的文件名会自动删除，因此，我想说，在每个需要它的小部件的开头都包含一个STATIC_URL是一个好习惯。这样，无论您以什么顺序渲染它们，jQuery脚本都会始终出现在需要它的文件之前。

请注意，在文件名中包含数字时，我会格外小心。在Django 2.2中，尝试订购脚本时似乎存在一个错误。

例如：

https://code.jquery.com/jquery-3.4.1.js

外观如下：

class FooWidget(forms.TextInput):
    class Media:
        js = ('foo1.js', 'foo2.js',)

class BarWidget(forms.TextInput):
    class Media:
        js = ('bar1.js', 'bar13.js',)

class SomeForm(forms.Form):
    field1 = forms.CharField(widget=BarWidget)
    field2 = forms.CharField(widget=FooWidget)

    def __init__(self, *args, **kwargs):
        super(SearchForm, self).__init__(*args, **kwargs)

我尝试了包含数字的名称的各种组合，但我无法遵循逻辑，所以我认为这是一个错误。

Answer 3

你应该将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())

Answer 4

您要执行添加的div上的某些插件脚本。您需要将类添加到您的元素，并将自定义事件与类相关联。哪个将执行您想要的功能或脚本。

要将自定义事件关联到动态添加的节点，请参考以下代码。

<!DOCTYPE html>
<html>
<head>
    <title>adding javascript to custom widgets</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<section class="team">
    <div class="container">
        <div class="row">
            <div class="container maxwidth">
                <button data-tab="tab1" class="active">AA<span></span></button>
            </div>

            <div class="maincontent"></div>
        </div>
    </div>
</section>
<script>
    $(function(){
        $(".active").click(function(){
            $(".maincontent").append("<div class='scroll'><h2>Hello</h2><div style='background:red; height:500px;'></div></div>")
            $(".maincontent").find(".scroll").trigger('dynload');
        });

        $('.container').on('dynload', '.scroll', function(){
            console.log("Append event fired");
            // Additinal Script resource you want to load for plugin
            $.getScript("Custom_Scrollbar.min.js") //script URL with abosolute path
            .done(function() {
                // Script loaded successfully calling of function           
                $(".scroll").mCustomScrollbar({
                });
            })
            .fail(function() {
                // Give you error when script not loaded in browser
                console.log('Script file not loaded');
            })
        })
    })
</script>
</body>
</html>

希望这会有所帮助！

将Javascript添加到自定义小部件

4 个答案: