用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隐藏窗体组

回答

相关问题