I am now studying Django form . Right now I am focusing on crispy form .
For now crispy and then after I master the form I will move on to Django Admin form and Django admin model form .
Django 1.10
Python 3.6.0
I am following these tutorials:
https://blog.bixly.com/awesome-forms-django-crispy-forms
http://django-crispy-forms.readthedocs.io/en/latest/layouts.html#
https://godjango.com/29-crispy-forms/
Here are my source code:views.py:
from django.views.generic import FormView
from apps.colors.forms import PersonDetailForm
class ColorStudyView(FormView):
template_name = 'colors/study.html'
form_class = PersonDetailForm
success_url = '/'forms.py:
from crispy_forms.bootstrap import Tab, TabHolder
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit, Layout
from django import forms
class NoFormTagCrispyFormMixin(object):
@property
def helper(self):
if not hasattr(self, '_helper'):
self._helper = FormHelper()
self._helper.form_tag = False
return self._helper
class PersonDetailForm(forms.Form):
name = forms.CharField(max_length=100)
age = forms.IntegerField(required=False)
address1 = forms.CharField(max_length=50, required=False)
address2 = forms.CharField(max_length=50, required=False)
city = forms.CharField(max_length=50, required=False)
state = forms.CharField(max_length=50, required=False)
mobile = forms.CharField(max_length=32, required=False)
home = forms.CharField(max_length=32, required=False)
office = forms.CharField(max_length=32, required=False)
twitter = forms.CharField(max_length=100, required=False)
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_tag = False
self.helper.layout = Layout(
TabHolder(
Tab('Information',
'name',
'age'
),
Tab('Address',
'address1',
'address2',
'city',
'state'
),
Tab('Contact',
'mobile',
'home',
'office',
'twitter',
)
)
)
self.helper.layout.append(Submit('submit', 'Submit'))study.html:
{% load crispy_forms_tags %}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<meta charset="UTF-8">
<title>Study</title>
<form action="" method="POST">
{% crispy form %}
</form>
</head>
<body>
</body>
</html>Problem:
Tab does not change.
Am I miss something?
Sorry for very basic level question, but this is my first day with Django frontend
Here is my picture. Tab Address and Contact are not work.
Update: Zollie solves my problem. Here is my study.html
{% load staticfiles %}
{% load crispy_forms_tags %}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<meta charset="UTF-8">
<title>Study</title>
<form action="" method="POST">
{% crispy form %}
</form>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.9.1.js">
</script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js">
</script>
<script type="text/javascript" src="{% static 'bootstrap-tab.js' %}"> </script>
</body>
</html>And here is my filesystem configuration
/Users/el/Code/siam-sbrand/static
(siam-sbrand) Sarits-MacBook-Air-2:static el$ ls
admin django_extensions img
bootstrap-tab.js file.txt js
dist font rest_framework
4条答案
按热度按时间dba5bblo1#
我遇到了同样的问题，当我第一次想使用标签在脆的形式。文档是相当薄弱，不幸的是，这个包。
TabHolder和Tabs不工作的原因是，你必须在html模板头中包含jquery和javascript，同时，你必须下载bootstrap-tab.js并把它放在bootstrap子文件夹ie.的“static”文件夹中，你还必须在html中包含它的路径。
所以，如果你只是在html头中包含Bootstrap或bootstrap.css是不够的，下面是一个例子：
bd1hkmkf2#
检查以下内容：
1.在www.example.com中settings.py您应该使用
CRISPY_TEMPLATE_PACK = 'bootstrap3'1.在静态文件中，您应该有一个bootstrap-tab.js
f2uvfpb93#
虽然这个问题是老问题，而且已经解决了，但我觉得也许值得再补充一些意见：我偶然发现了这个问题，又找到了另一个原因。
首先，我检查并确认我已经包括了接受答案中提到的.js文件。但标签仍然不起作用。
我找到了一些bootstrap选项卡的例子，比如https://mdbootstrap.com/docs/jquery/components/tabs/，我得出结论，要使选项卡正常工作，应该确保'tab header'的href属性和'tab body'的id属性之间存在一对一的关系，比如：
注意：注意“a”元素的href属性和“div”元素的id属性。
我做了一些实验，得出结论：一旦导入了相关的.js和其他文件，并且正确设置了href和id属性，该选项卡就可以工作了。
现在的问题变成了“如何使脆设置他们适当”。
我检查了以下文件：1. /root/.pyenv/版本/3.7.3/库/Python 3.7/站点包/脆脆表单bootstrap.py
我注意到了css_id属性。我猜如果一个人正确地设置了“css_id”，也许crispy就能完成剩下的工作。我试了试。它工作起来很有魅力。
也许脆弱的文档需要一些改进。
8i9zcol24#
如果你-像我一样-搜索为什么这个解决方案不适合你的答案，检查你是否使用 Bootstrap 4。据我所知，标签从脆不工作的5至少现在。