Jquery 使用Django ModelForm创建模态表单的混淆

我正在尝试为一个web应用程序创建一个弹出表单，医生在其中选择一个期刊（研究/科学期刊名称）并输入一些信息，然后将其添加到显示该信息的组件列表中。我试图将用于他们将日志信息输入到弹出式表单中的表单抽象出来，我对添加此功能所需的工作量感到非常惊讶。我是一个Bootstrap的初学者，我正在使用它，因为很显然，要让Bootstrap modals与Django一起工作几乎是不可能的。以下是对库指定的相关文件的代码更改——我已将它们的“createbook”替换为“createjournalentry”等

虽然有很多代码，但它实际上是一个非常简单的应用程序，而且无法让modals与ModelForm一起工作已经让我沮丧了一个多星期

型号.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')

视图.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')

url.py（用于SUB应用程序）

subsmems.html（这是我列出日记账条目的“索引”页面——我对从哪个目录/链接什么以及如何链接感到非常困惑）

{%load static%}
{%include./modal.html%}
添加日志

{%如果所有日记账分录%}
{所有日记账分录中的分录百分比}
{{entry.get_name_display}
您每年支付${entry.sub_cost}}

于{entry.renewal_date}到期续约

{%endfor%}
{%endif%}

$（文档）.ready（函数（）{
$（“.create journalentry”）.modalForm({
formURL:“{%url'%}”
});
});

最后，接下来的两个将直接从库设置站点上删除，并进行一些小的修改：

modal.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>

        <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>

情态标题
&时代；
...
接近
保存更改

create_journalentry.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>

        <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>

{%csrf_令牌%}
添加日志
&时代；
{%形式的字段为%}
{{field.label}
{{field}}
{%字段中有错误。错误%}
{{error}
{%endfor%}
{%endfor%}
接近
创造