Django Bootstrap模式形式不起作用

Question

我正在创建一个待办事项网站，该网站的用户添加了一个新事件，我想将其作为模式形式。我使用了django-bootstrap-modal-forms，但是当我单击新事件按钮时，没有任何弹出窗口。我认为这与按钮未正确绑定到视图有关，但是我确保再次遵循文档，但仍然无法正常工作。我还确保我在网站上具有引导程序，jquery和自定义脚本。任何帮助，将不胜感激！

forms.py

from bootstrap_modal_forms.forms import BSModalForm
from .widgets import BootstrapDateTimePickerInput
from bootstrap_datepicker_plus import DateTimePickerInput
from .models import ToDoItem

class NewEventForm(BSModalForm):
    class Meta:
        model = ToDoItem
        fields = ['title', 'description', 'start_time', 'end_time', 'remind_time']
        widgets = {
            'start_time': DateTimePickerInput(
                options={"format": "MM/DD/YYYY hh:mm"}
            ), 
            'end_time': DateTimePickerInput(
                options={"format": "MM/DD/YYYY hh:mm"}
            ),
            'remind_time': DateTimePickerInput(
                options={"format": "MM/DD/YYYY hh:mm"}
            ),
        }

Views.py

from django.shortcuts import render, redirect, get_object_or_404
from django.contrib.auth.decorators import login_required
from django.contrib.auth.models import User
from django.urls import reverse_lazy
from .models import ToDoItem
from .forms import NewEventForm
from bootstrap_modal_forms.generic import BSModalCreateView

@login_required(login_url='/login')
def home(request):
    user = get_object_or_404(User, username=request.user.username)
    context = {
        'events': ToDoItem.objects.filter(parent_user=user) 
    }
    return render(request, 'main/home.html', context)


# @login_required(login_url='/login') 
# def new_event(request):
#   if request.method == 'POST':
#       form = NewEventForm(request.POST)
#       form.instance.parent_user = request.user
#       if form.is_valid():
#           form.save()
#           return redirect('app-home') 
#   else:
#       form = NewEventForm()
#   return render(request, 'main/todoitem_form.html', {'form': form})

class EventCreateView(BSModalCreateView):
    template_name = 'main/todoitemV_form.html'
    form_class = NewEventForm
    success_message = 'New Event Created!'
    success_url = reverse_lazy('app-home')

html表单

{% extends "main/base.html" %}
{% load bootstrap4 %}
{% block extrahead %}
{{ form.media }}
{% endblock extrahead %}
    <form method="POST" action=""> 
    {% csrf_token %}

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

        <div class="modal-body"> 
            <fieldset class="form-group">
                <legend class="border-bottom mb-4">New Event</legend>
                    {% bootstrap_form form %}
            </fieldset> 
        </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>

urls.py

from django.contrib import admin
from django.urls import path, include
from .views import (
    home, 
    EventCreateView,
)
urlpatterns = [
    path('', home, name='app-home'),
    path('new_event/', EventCreateView.as_view(), name='new-event')
]

home.html

{% extends "main/base.html" %}
{% load static %}
{% block content %}
    <div class="mt-2">
        {% if user.first_name == '' %}
            <h1 class="ml-3" style="display: inline-block;">Welcome, {{ user.username }}</h1>
        {% else %}
            <h1 class="ml-3" style="display: inline-block;">Welcome, {{ user.first_name }}</h1>
        {% endif %}

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

                </div>
            </div>
        </div> 
        <!-- Create event button -->
        <button class="create-event btn btn-primary" type="button" name="button" style="float: right;">New Event</button>
    </div>

    <div class="col-md-6 inline">  
        <h2 class="ml-1">Events</h2>
        <div class="events-content-section ml-2">
            {% for event in events %} 
                <div>
                    <button type="button" class="btn btn-light">
                        <h3>{{ event.title }}</h3>  
                    </button>
                </div>
            {% endfor %}    
        </div>
    </div>

    <div class="col-md-6 inline">  
        <h2 class="ml-2">Reminders</h2>
        <div class="events-content-section ml-2">
            {% for event in events %} 
                <div>
                    <button type="button" class="btn btn-light">
                        <h3>{{ event.title }}</h3>  
                    </button>
                </div>
            {% endfor %}    
        </div>
    </div>

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

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

    });
    </script>

    <script src="{% static 'assets/js/bootstrap.js' %}"></script>
    <script src="{% static 'assets/js/jquery.js' %}"></script>
    <script src="{% static 'js/jquery.bootstrap.modal.forms.js' %}"></script>


{% endblock content %}

Answer 1

尝试安装django-widget-tweaks并以html格式添加{% load widget_tweaks %}。

在文档的“用法”部分中没有进行解释，但是您可以在“示例”部分以及示例代码（可以从https://github.com/trco/django-bootstrap-modal-forms.git下载）中看到它。

在我自己的代码中，当我删除此行时，我的表单不再弹出。