用Flask Jinja2和WTForms隱藏窗體組

我試圖根據窗體另一部分中複選框的狀態來顯示或隱藏表單域。我認爲我可以用jQuery .show（）或.hide（）相對容易地做到這一點，但目前我沒有太多運氣。有什麼想法嗎？用Flask Jinja2和WTForms隱藏窗體組

窗體類：

class MyForm(Form): 
    checked = BooleanField('Check this box:') 
    date = DateField('Date:', format='%Y-%m-%d', id="dates") 
    submit = SubmitField('Submit')

模板：

{% import "bootstrap/wtf.html" as wtf %} 

{% block content %} 

{{ form.hidden_tag() }} 
{{ wtf.form_field(form.checked) }} 
{{ wtf.form_field(form.date) }} 
{{ wtf.form_field(form.submit) }} 

{% endblock %} 

{% block scripts %} 

<script type="text/javascript"> 
jQuery(document).ready(function() { 
    $("#checked").change(function() { 
    if(this.checked) { 
     $('#dates').show(); 
    } else { 
     $('#dates').hide(); 
    } 
    }); 
}); 
</script> 

{% endblock %}

來源

2014-11-21 BarFooBar

看起來你正在使用Flask-Bootstrap。

首先，確保在您的模板中包含{% extends 'bootstrap/base.html' %}。如果沒有這一行，你會失去Flask-Bootstrap在模板中包含的所有內容，比如jQuery。

其次，你重寫scripts塊。這是Flask-Bootstrap包含jQuery的地方。爲了把你自己的東西放在那裏而不丟失基本版本，你需要使用Jinja's super function。它將包含您自己的父模板的scripts塊。

完成這些修改後您的模板應該是這個樣子

{% extends 'bootstrap/base.html' %} 

{% import "bootstrap/wtf.html" as wtf %} 

{% block content %} 
    <form> 
     {{ form.hidden_tag() }} 
     {{ wtf.form_field(form.checked) }} 
     {{ wtf.form_field(form.date) }} 
     {{ wtf.form_field(form.submit) }} 
    </form> 
{% endblock %} 

{% block scripts %} 
    {{ super() }} 

    <script> 
     jQuery(document).ready(function() { 
      $("#checked").change(function() { 
       if (this.checked) { 
        $('#dates').show(); 
       } else { 
        $('#dates').hide(); 
       } 
      }); 
     }); 
    </script> 
{% endblock %}

來源

2014-11-21 23:10:06 dirn

'{％ '延伸，引導/ base.html文件' ％}'包括在我的佈局。我在添加引導之前將jquery包含在靜態目錄中，所以我知道jquery正在加載。 console.log（）也告訴我腳本正在執行。只是不切換日期表單組。 – BarFooBar 2014-11-21 23:17:54

將jQuery放置在您的'static'文件夾中不會將其添加到頁面中。不包括它在模板中，它不會被包括在內。切換工作使用您的表單和我的修改版本的模板。既然你提到了一些你的例子中沒有的東西，你的實際模板是什麼樣的？ – dirn 2014-11-21 23:25:29

你是對的。看起來這是一個使用'{{super（）}}'的問題。我很困惑，因爲我沒有得到jQuery是未定義的錯誤。 – BarFooBar 2014-11-21 23:33:45

用Flask Jinja2和WTForms隱藏窗體組

回答

相關問題