Я не знаком с javascript, но я комментировал этот плагин js, созданный для проектов django, и использовал .modal ("show") в качестве индикатора того, когда код действительно выполнялся - и я не вижупочему это не показывает модальное значение (то есть оно никогда не выходило за пределы оператора загрузки).
modal_forms.js
(function ($) {
// Open modal & load the form at formURL to the modalContent element
var newForm = function (modalID, modalContent, modalForm, formURL, errorClass, submitBtn) {
##IT WOULD SHOW MODAL IF SCRIPT HERE##
$(modalContent).load(formURL, function () {
$(modalID).modal("show");
##DESIGNED TO SHOW HERE BUT DOESNT##
$(modalForm).attr("action", formURL);
// Add click listener to the submitBtn
ajaxSubmit(modalID, modalContent, modalForm, formURL, errorClass, submitBtn);
});
};
// Add click listener to the submitBtn
var ajaxSubmit = function (modalID, modalContent, modalForm, formURL, errorClass, submitBtn) {
...};
// Check if form.is_valid()
var isFormValid = function (modalID, modalContent, modalForm, formURL, errorClass) {
...};
$.fn.modalForm = function (options) {
// Default settings
var defaults = {
modalID: "#modal",
modalContent: ".modal-content",
modalForm: ".modal-content form",
formURL: null,
errorClass: ".invalid",
submitBtn: ".submit-btn"
};
// Extend default settings with provided options
var settings = $.extend(defaults, options);
return this.each(function () {
// Add click listener to the element with attached modalForm
$(this).click(function (event) {
// Instantiate new modalForm in modal
newForm(settings.modalID,
settings.modalContent,
settings.modalForm,
settings.formURL,
settings.errorClass,
settings.submitBtn);
});
});
};
}(jQuery));
На это ссылается мой базовый шаблон, который будет расширен другимишаблоны, которые составляют содержание тела, а не только панель навигации.В выделенных разделах показана кнопка, которая будет вызывать функцию modalForm, пустая модальная форма, а внизу - сценарий js, который связывает триггер и функцию modalForm.
base.html
<!DOCTYPE html>
<html lang="en">
<head>
{% load staticfiles %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"/> <!--bootstrap css-->
<link rel="stylesheet" type="text/css" href="{% static 'WebProjects/style.css' %}"/> <!--style file-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!--icons-->
{% block head %}{% endblock %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="{% url 'webprojects:index' %}">ProjectOverview<span class="sr-only">(current)</span></a>
<li class="nav-item active">
<!-- Creating a new project, Pop up trigger -->
<button class="create-project btn btn-primary" type="button" name="button" id="modalTrigger"> <!--class="nav-link ml-sm-1" href="#"-->
<i class="fa fa-plus-circle"></i> AddProject <span class="sr-only">(current)</span>
</button>
</ul>
<div class="modal fade" tabindex="-1" role="dialog" id="modal">
<div class="modal-dialog" role="document">
<div class="modal-content" id="modalContent"></div>
</div>
</div>
...
</div>
</nav>
{% block body %}{% endblock %}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <!-- Refrencing js assets and bootstrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<!-- jQuery plugins found unsuitable, Reverse engineered and modified version found bellow -->
<script src="{% static 'WebProjects/js/modal_forms.js' %}"></script>
<script>
$(document).ready(function() {
$("#modalTrigger").modalForm({
formURL: "{% url 'webprojects:create_projects' %}"
});
});
</script>
</body>
</html>
Сложность этого заключается в том, что вместо статической формы в модальном режиме она предназначена для загрузки формы, которая будет сгенерирована только при представлении, с которым связан URL - не покидая страницу.
urls.py
from django.urls import path
from . import views
app_name = 'webprojects'
urlpatterns = [
# /projects/
path('', views.IndexView.as_view(), name='index'),
# /projects/-/create
path('create', views.ProjectsCreateView.as_view(), name='create_projects')
]
views.py
from django.contrib.messages.views import SuccessMessageMixin
from django.urls import reverse_lazy
from django.views import generic
from django.views.generic.edit import CreateView # UpdateView, DeleteView
from .mixins import PassRequestMixin
from .models import Projects
from .forms import ProjectsForm
class IndexView(generic.ListView):
template_name = 'WebProjects/index.html'
queryset = Projects.objects.all() # pylint: disable=E1101
class DetailView(generic.DetailView):
model = Projects
template_name = 'WebProjects/detail.html'
class ProjectsCreateView(PassRequestMixin, SuccessMessageMixin, CreateView):
form_class = ProjectsForm
template_name = 'WebProjects/create_projects.html'
success_message = "Success"
success_url = reverse_lazy('index')
forms.py
from django import forms
from .models import Projects
from .mixins import PopRequestMixin, CreateUpdateAjaxMixin
class ProjectsForm(PopRequestMixin, CreateUpdateAjaxMixin, forms.ModelForm):
class Meta:
model = Projects
fields = ['project', 'description']
Другая часть django-bootstrap-modal-forms - это используемые миксины.в этих двух файлах.mixins.py
from django.contrib import messages
from django.contrib.auth import (REDIRECT_FIELD_NAME, get_user_model, login as auth_login)
from django.http import HttpResponseRedirect
class PassRequestMixin(object):
"""
Mixin which puts the request into the form's kwargs.
Note: Using this mixin requires you to pop the `request` kwarg
out of the dict in the super of your form's `__init__`.
"""
def get_form_kwargs(self):
kwargs = super(PassRequestMixin, self).get_form_kwargs()
# Update the existing form kwargs dict with the request's user.
kwargs.update({"request": self.request})
return kwargs
class PopRequestMixin(object):
"""
Mixin which pops request out of the kwargs and attaches it to the form's
instance.
Note: This mixin must precede forms.ModelForm/forms.Form. The form is not
expecting these kwargs to be passed in, so they must be popped off before
anything else is done.
"""
def __init__(self, *args, **kwargs):
self.request = kwargs.pop("request", None)
super(PopRequestMixin, self).__init__(*args, **kwargs)
class CreateUpdateAjaxMixin(object):
"""
Mixin which passes or saves object based on request type.
"""
def save(self, commit=True):
if not self.request.is_ajax():
instance = super(CreateUpdateAjaxMixin, self).save(commit=commit)
else:
instance = super(CreateUpdateAjaxMixin, self).save(commit=False)
return instance
Я сосредоточился на экспериментах с html и js, а не на python, но только потому, что уверен, что это не является причиной проблемы - если только яиметь задний конец просто не подходит для того, как функция загрузки предназначена для использования.Я надеюсь, что я просто делаю небольшую ошибку, любые творческие предложения оценили xoxo