Путаница при создании модальной формы с Django ModelForm - PullRequest
Новая
       42

Путаница при создании модальной формы с Django ModelForm

0 голосов
/ 29 апреля 2020

Я пытаюсь создать всплывающую форму для веб-приложения, в которой врачи выбирают журнал (research / scientifi c название журнала) и вводят некоторую информацию, и она добавляется в список компонентов, показывающих эту информацию. Я пытаюсь абстрагировать форму, используемую для ввода информации журнала, во всплывающую форму, и я действительно удивлен тем, как много работы по добавлению этой функции. Я новичок с Bootstrap и использую https://pypi.org/project/django-bootstrap-modal-forms/, потому что, по-видимому, почти невозможно заставить Bootstrap модалы работать с Django в противном случае. Вот изменения кода в соответствующих файлах, указанных библиотекой - я заменил их «create-book» на «create-journalentry» et c.

Существует много кода, но это действительно очень простое приложение, и эта неспособность заставить модалы работать с ModelForm потрясающе расстраивала меня больше недели.

models.py 

from django.db import models
from datetime import date
from django import forms
from bootstrap_modal_forms.forms import BSModalForm

JOURNAL_NAME_CHOICES = [
    ('NEJM', 'New England Journal of Medicine'),
    ('JVS', 'Journal of Vascular Surgery'),
]

# Create your models here.
class JournalEntry(models.Model):
    name = models.CharField(
        null=False,
        choices=JOURNAL_NAME_CHOICES,
        max_length=256)

    renewal_date = models.DateField(
        verbose_name="Date of Renewal", 
        auto_now=False, 
        auto_now_add=False, 
        blank=True,
        null=True,
        )

    sub_cost = models.FloatField(
        blank=True, 
        null=False, 
        max_length=6, 
        verbose_name='Subscription Cost',
        )

    def __str__(self):
        return self.name

class JournalEntryForm(BSModalForm):
    """Form definition for JournalEntry."""

    class Meta:
        """Meta definition for JournalEntryform."""

        model = JournalEntry
        fields = ('name', 'renewal_date', 'sub_cost')

views.py 

from django.shortcuts import render
from django.http import HttpResponse, HttpResponseRedirect
from .models import JournalEntry, MembershipEntry, JOURNAL_NAME_CHOICES, MEMBERSHIP_NAME_CHOICES, JournalEntryForm, MembershipEntryForm
# from .forms import JournalForm
from django.urls import reverse_lazy
from bootstrap_modal_forms.generic import BSModalCreateView

# Create your views here.
def subsmems(request):
    all_journal_entries = JournalEntry.objects.all()
    # all_membership_entries = MembershipEntry.objects.all()
    # all_journal_names = [x[1] for x in JOURNAL_NAME_CHOICES]
    # all_membership_names = [x[1] for x in MEMBERSHIP_NAME_CHOICES]
    form = JournalEntryForm()
    context = {
        'all_journal_entries': all_journal_entries,
        # 'all_membership_entries': all_membership_entries,
        'form': form,
    }
    if request.method == 'POST':
        # create, check, process data from form, redirect
        context['form'] = JournalEntryForm(request.POST)
        if context['form'].is_valid:
            context['form'].save()
            return render(request, './subs/subsmems.html', context) 

    else:
        return render(request, './subs/subsmems.html', context)


class JournalEntryCreateView(BSModalCreateView):
    template_name = './subs/create_journalentry.html'
    form_class = JournalEntryForm
    success_message = 'Success: Journal Entry was created.'
    success_url = reverse_lazy('./subs/subsmems.html')

urls.py (для приложение subs) 

from django.urls import path
from . import views

from .views import subsmems

urlpatterns = [
    path('', subsmems, name='subsmems'),
    path('create/', views.JournalEntryCreateView.as_view(), name='create_journalentry'),
]

subsmems. html (это моя «индексная» страница со списком записей журнала - я очень запутался в том, что связать из какой директории / ссылки и как) 

{% load static %}

    {% include './modal.html' %}

<head>
    <link rel="stylesheet" href="{% static 'subs/node_modules/bootstrap/scss/bootstrap.scss' %}">
</head>

<body>
    <!-- javascript and styling links -->
    <!-- <script src="{% static 'subs/node_modules/bootstrap/js' %}"></script>
    <script src="{% static 'subs/node_modules/jquery/src/jquery.js' %}"></script> -->
    <script src="{% static 'js/jquery.bootstrap.modal.forms.js' %}"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
            integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
            crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
            crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
            integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
            crossorigin="anonymous"></script>


            <div>


        <div class="modal fade" tabindex="-1" role="dialog" id="modal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">

                </div>
            </div>
        </div>

        <button class="create-journalentry btn btn-primary" type="button" name="button">Add Journal</button>

        <!-- Journal Entries: -->
        <ul>
            {% if all_journal_entries %}
            {% for entry in all_journal_entries %}

            <div class="jumbotron" style="
                width: 95%; 
                margin-top: 10px; 
                margin-right: 10px;"
                >
                <h1 class="display-6">{{ entry.get_name_display }}</h1>
                <p class="lead">You are paying ${{ entry.sub_cost }} per year.</p>
                <hr class="my-4">
                <p>Due for renewal on {{ entry.renewal_date }}</p>
            </div>
            {% endfor %}
            {% endif %}
        </ul>

    <script type="text/javascript">
        $(document).ready(function () {

            $(".create-journalentry").modalForm({
                formURL: "{% url 'subsmems' %}"
            });

        });
    </script>

И, наконец, следующие две взяты прямо с сайта установки библиотеки, с небольшими изменениями:

модальные. html

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

create_journalentry. html

        <form method="post" action="{% url 'subsmems' %}">
            {% csrf_token %}

            <div class="modal-header">
                <h5 class="modal-title">Add Journal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                {% for field in form %}
                <div class="form-group{% if field.errors %} invalid{% endif %}">
                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                    {{ field }}
                    {% for error in field.errors %}
                    <p class="help-block">{{ error }}</p>
                    {% endfor %}
                </div>
                {% endfor %}
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="submit-btn btn btn-primary">Create</button>
            </div> 
        </form>
...