Django酥脆表单标签

dffbzjpn  于 2023-03-04  发布在  Go
关注(0)|答案(4)|浏览(141)

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
dba5bblo

dba5bblo1#

我遇到了同样的问题,当我第一次想使用标签在脆的形式。文档是相当薄弱,不幸的是,这个包。
TabHolder和Tabs不工作的原因是,你必须在html模板头中包含jquery和javascript,同时,你必须下载bootstrap-tab.js并把它放在bootstrap子文件夹ie.的“static”文件夹中,你还必须在html中包含它的路径。
所以,如果你只是在html头中包含Bootstrap或bootstrap.css是不够的,下面是一个例子:

<head>
<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/js/bootstrap-tab.js' %}">  </script>
bd1hkmkf

bd1hkmkf2#

检查以下内容:
1.在www.example.com中settings.py您应该使用CRISPY_TEMPLATE_PACK = 'bootstrap3'
1.在静态文件中,您应该有一个bootstrap-tab.js

f2uvfpb9

f2uvfpb93#

虽然这个问题是老问题,而且已经解决了,但我觉得也许值得再补充一些意见:我偶然发现了这个问题,又找到了另一个原因。
首先,我检查并确认我已经包括了接受答案中提到的.js文件。但标签仍然不起作用。
我找到了一些bootstrap选项卡的例子,比如https://mdbootstrap.com/docs/jquery/components/tabs/,我得出结论,要使选项卡正常工作,应该确保'tab header'的href属性和'tab body'的id属性之间存在一对一的关系,比如:

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
      aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile"
      aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact"
      aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">A Tab</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">B tab</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">C tab</div>
</div>

注意:注意“a”元素的href属性和“div”元素的id属性。
我做了一些实验,得出结论:一旦导入了相关的.js和其他文件,并且正确设置了href和id属性,该选项卡就可以工作了。
现在的问题变成了“如何使脆设置他们适当”。
我检查了以下文件:1. /root/.pyenv/版本/3.7.3/库/Python 3.7/站点包/脆脆表单bootstrap.py

class Tab(Container):
    """
    Tab object. It wraps fields in a div whose default class is "tab-pane" and
    takes a name as first argument. Example::

        Tab('tab_name', 'form_field_1', 'form_field_2', 'form_field_3')
    """
    css_class = 'tab-pane'
    link_template = '%s/layout/tab-link.html'

    def render_link(self, template_pack=TEMPLATE_PACK, **kwargs):
        """
        Render the link for the tab-pane. It must be called after render so css_class is updated
        with active if needed.
        """
        link_template = self.link_template % template_pack
        return render_to_string(link_template, {'link': self})
  1. /root/.pyenv/versions/3.7.3/lib/python3.7/site-packages/crispy_forms/templates/bootstrap3/layout/tab-link.html
<li class="tab-pane{% if 'active' in link.css_class %} active{% endif %}"><a href="#{{ link.css_id }}" data-toggle="tab">{{ link.name|capfirst }}{% if tab.errors %}!{% endif %}</a></li>

我注意到了css_id属性。我猜如果一个人正确地设置了“css_id”,也许crispy就能完成剩下的工作。我试了试。它工作起来很有魅力。
也许脆弱的文档需要一些改进。

8i9zcol2

8i9zcol24#

如果你-像我一样-搜索为什么这个解决方案不适合你的答案,检查你是否使用 Bootstrap 4。据我所知,标签从脆不工作的5至少现在。

相关问题