添加JavaScript到自定义部件

Django: Best Way to Add Javascript to Custom Widgets

但是是不一样的。

原始问题询问如何向自定义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对函数是至关重要的。解决这个问题的最好方法是什么？

来源

2015-08-25 5xum

如果代码被包裹在一个现成的事件处理程序，这不要紧，插件文件正在加载页面 – charlietfl

@charlietfl但是包装在'$（document）.ready（）'中的代码无法运行，因为jQuery尚未加载。我将所有静态文件加载到文档的末尾。 – 5xum

那么你必须在jQuery之后加载这段代码......直到它存在才能引用jQuery – charlietfl

你应该初始化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-26 15:50:50

但这并不起作用。因为jquery调用'$（document）'仍然出现在文档正文的中间，而不是最后，这意味着它出现在jquery加载之前。 – 5xum

@ 5xum你应该把你的重要的JS库放入部分。 –

我不同意。我有多个来源，听说最好把js脚本放到最后（以加快页面加载速度）。 – 5xum

添加JavaScript到自定义部件

回答

相关问题