Как исправить: Django формы: {{form}} не работает на динамической HTML-странице - PullRequest
Новая
       37

Как исправить: Django формы: {{form}} не работает на динамической HTML-странице

0 голосов
/ 06 июня 2019

Я создал общежитие в Джанго: 

#forms.py    
    from django import forms


    class ContactForm(forms.Form):
    name = forms.CharField()
    number = forms.FloatField()
    eail_user = forms.EmailField()

и импортировано в views.py 

#views.py
from django.shortcuts import render
from .models import Cards
from cards.forms import ContactForm


def index(request):
    cards = Cards.objects.all()
    return render(request,'card.html', {'cards':cards})


def contact(request):
    form = ContactForm()
    return render(request,'name.html', {'form': form})

Я создал три html-файла, name.html, base.html и card.html. Форма правильно отображается в name.html, однако в cards.html она показывает только одну кнопку и пропускает тег {{form}}. Есть идеи, как решить проблему? Спасибо. 

    #name.html
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/your-name/" method="post">
    {% csrf_token %}
    {{ form }}
    <input type="submit" value="Submit">
</form>
</body>
</html>

Это base.html 

#base.html
{%  load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="{% static 'css/stylesheet.css' %}" rel="stylesheet" type="text/css">
    <!------ Include the above in your HEAD tag ---------->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<section id="team" class="pb-5">
    <div class="container">
        <h5 class="section-title h1">OUR TEAM</h5>
        <div class="row">
            {% block content %}
            {% endblock %}
        </div>
    </div>
</section>
</body>
</html>

А это card.html, который идет от base.html 

#card.html
{% extends 'base.html' %}

{% block content %}
    <!-- Team -->
    {% for card in cards %}
        <!-- Team member -->
        <div class="col-xs-12 col-sm-6 col-md-4">
            <div class="image-flip" ontouchstart="this.classList.toggle('hover');">
                <div class="mainflip">
                    <div class="frontside">
                        <div class="card">
                            <div class="card-body text-center">
                                <p><img class=" img-fluid"
                                        src="https://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_01.png"
                                        alt="card image"></p>
                                <h4 class="card-title">{{ card.name }}</h4>
                                <p class="card-text">{{ card.description }}</p>
                                <a href="#" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="backside">
                        <div class="card">
                            <div class="card-body text-center mt-4">
                                <h4 class="card-title">{{ card.name }}</h4>
                                <!--<p class="card-text"> {{ card.back_description }}-->
                                <form action="/your-name/" method="post">
                                    {% csrf_token %}
                                    {{ form }}
                                    <input type="submit" value="Submit">
                                </form>
                                <!--</p> -->
                                <ul class="list-inline">
                                    <li class="list-inline-item">
                                        <a class="social-icon text-xs-center" target="_blank" href="#">
                                            <i class="fa fa-facebook"></i>
                                        </a>
                                    </li>
                                    <li class="list-inline-item">
                                        <a class="social-icon text-xs-center" target="_blank" href="#">
                                            <i class="fa fa-twitter"></i>
                                        </a>
                                    </li>
                                    <li class="list-inline-item">
                                        <a class="social-icon text-xs-center" target="_blank" href="#">
                                            <i class="fa fa-skype"></i>
                                        </a>
                                    </li>
                                    <li class="list-inline-item">
                                        <a class="social-icon text-xs-center" target="_blank" href="#">
                                            <i class="fa fa-google"></i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ./Team member -->
    {% endfor %}

{% endblock %}

1 Ответ

0 голосов
/ 08 июня 2019

Функция index отсутствует инициализация ContactFrom, поэтому он не отображается. Попробуйте это: 

def index(request):
    cards = Cards.objects.all()
    form = ContactForm()
    return render(request,'card.html', {'cards':cards, 'form': form})
...