jQuery元素未出現在Django頁面上

Question

我正在嘗試從django-floppyforms實現Slider 。 但是，當我使用給定的示例時，我的頁面僅顯示一個空白文本框。 當我使用{{form.as_p}}渲染時，只能使本機滑塊正常工作，但是II確實喜歡JS功能。

我有一個從http://jquery.com/download/下載的jquery-1.11.1.min.js副本，其文件路徑是floppyform_test/static/js/jquery-1.11.1.min.js 1.11.1.min.js`floppy_project / src / floppyform_test /靜態/ js

我認為這可能是我的jQuery文件路徑（我嘗試了許多變體）或views.py的問題

我以前從未真正使用過JavaScript，但這是我嘗試過的。

views.py

def sview(request):
    jquery_slider = Slider()
    native_slider = SlideForm()

    return render(request, 'slider.html', {
                                           'jquery_slider': jquery_slider,   
                                           'native_slider': native_slider,             
                                           })

slide.html （改編自Original ）

{# slider.html #}
{% include "floppyforms/input.html" %}
<div id="{{ attrs.id }}-slider"></div>

<script type="text/javascript" src="{{ STATIC_URL }} /static/js/jquery-1.11.1.min.js">
  $(document).ready(function() {
    var type = $('<input type="range" />').attr('type');
    if (type == 'text') { // No HTML5 support
      $('#{{ attrs.id }}').attr("readonly", true);
      $('#{{ attrs.id }}-slider').slider({
        {% if value %}value: {{ value }},{% endif %}
        min: {{ attrs.min }},
        max: {{ attrs.max }},
        step: {{ attrs.step }},
        slide: function(event, ui) {
          $('#{{ attrs.id }}').val(ui.value);
        }
      });
    }
  });
</script>

form.py （從原始 副本復制）

import floppyforms as forms

class Slider(forms.RangeInput):
    min = 5
    max = 20
    step = 5
    template_name = 'slider.html'

    class Media:
        js = (
            'js/jquery.min.js',
            'js/jquery-ui.min.js',
        )
        css = {
            'all': (
                'css/jquery-ui.css',
            )
        }

class SlideForm(forms.Form):
    num = forms.IntegerField(widget=Slider)

    def clean_num(self):
        num = self.cleaned_data['num']
        if not 5 <= num <= 20:
            raise forms.ValidationError("Enter a value between 5 and 20")

        if not num % 5 == 0:
            raise forms.ValidationError("Enter a multiple of 5")
        return num

任何幫助都非常有用

Answer 1

三件事：

1. 您可以在{{static_url}} / static ....路徑中找到jquery文件嗎？ 如果將static_url設置為/ static /，則無需再次添加/ static。

2. 您已經在Slider窗口小部件中聲明了更多jquery，但是它與模板中聲明的路徑和版本不同，因此會發生沖突。

3. 不要像聲明那樣聲明您的jquery文件-將其放在文檔的開頭，然后使用$（document）.ready（function（）{}）語法編寫臨時腳本