A jQuery plugin for creating AJAX driven Django forms in Bootstrap modal.
Project description
A jQuery plugin for creating AJAX driven Django forms in Bootstrap modal.
Installation
Install django-bootstrap-modal-forms:
$ pip install django-bootstrap-modal-forms
Add “bootstrap_modal_forms” to your INSTALLED_APPS setting:
INSTALLED_APPS = [ ... 'bootstrap_modal_forms', ... ]Include Bootstrap, jQuery and jquery.bootstrap.modal.forms.js on every page where you would like to set up the AJAX driven Django forms in Bootstrap modal.
IMPORTANT: Adjust Bootstrap and jQuery file paths to match yours, but include jquery.bootstrap.modal.forms.js exactly as in code bellow.
<head>
<link rel="stylesheet" href="{% static 'assets/css/bootstrap.css' %}">
</head>
<body>
<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>
</body>Usage
1. Form
Define either Django Form or ModelForm. django-bootstrap-modal-forms works with both.
forms.py
from django import forms
from .models import Test
class TestForm(forms.ModelForm):
class Meta:
model = Test
fields = ['test_field_1', 'test_field_2', ]2. Form’s html
test/create_test.html
<form method="post" action="{% url 'test:create_test' %}">
{% csrf_token %}
<div class="modal-header">
<h5 class="modal-title">Create a new test</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</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="submit" class="btn btn-primary" formnovalidate="formnovalidate">Create</button>
</div>
</form>Define form’s html and save it as Django template.
Bootstrap 4 modal elements are used in this example.
Form should POST to url defined in #4.
Add “invalid” class or custom errorClass to the elements that wrap the fields.
“invalid” class acts as a flag for the fields having errors after the form has been POSTed.
3. Class-based view
Define a class-based view TestFormView that processes the form defined in #1 and uses the template defined in #2. Define also the success_url for TestFormView and separate SuccessView with your own success.html.
views.py
from django.shortcuts import render
from django.urls import reverse_lazy
from django.views.generic.base import TemplateView
from django.views.generic.edit import CreateView
from .forms import TestForm
class TestFormView(CreateView):
template_name = 'test/create_test.html'
form_class = TestForm
success_url = reverse_lazy('test:success_view')
class SuccessView(TemplateView):
template_name = "test/success.html"4. URL for the view
Define URL for the views in #3.
from django.urls import path
from . import views
app_name = 'test'
urlpatterns = [
path('', views.index, name='index'),
path('test/create_test/', views.TestFormView.as_view(), name='create_test')
path('test/success/', views.SuccessView.as_view(), name='success_view')
]5. Bootstrap modal and trigger element
Define the Bootstrap modal window and trigger element.
test/index.html
<div class="modal fade" tabindex="-1" role="dialog" id="modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div>
</div>
</div>
<button type="button" class="btn btn-primary" id="createTest">
<span class="fa fa-plus fa-sm"></span>
New Test
</button>Same modal window can be used for multiple modalForms in single template (see #6).
Form’s html from #2 is loaded within <div class="modal-content"></div>.
Trigger element (in this example button) selected with id selector is used for instantiation of modalForm (see #6).
Any element can be trigger element as long as modalForm is bound to it.
6. modalForm
Add script to the template from #5 and bind the modalForm to the trigger element. Set TestFormView URL defined in #4 as formURL and SuccessView URL as successURL properties of modalForm.
If you want to create more modalForms in single template using the same modal window from #5, repeat steps #1 to #4, create new trigger element as in #5 and bind the new modalForm with unique URLs to it.
IMPORTANT: Default values for modalID, modalContent, modalForm and errorClass are used in this example, while formURL and successURL are customized. If you customize any other option adjust the code of the above examples accordingly.
test/index.html
<script type="text/javascript">
$(document).ready(function() {
$("#createTest").modalForm({
formURL: "{% url 'test:create_test' %}",
successURL: "{% url 'test:success_view' %}"
});
});
</script>Options
- modalID
Sets the custom id of the modal. Default: "#modal"
- modalContent
Sets the custom class of the element to which the form’s html is appended. Default: ".modal-content"
- modalForm
Sets the custom form selector. Default: ".modal-content form"
- formURL
Sets the url of the form’s view and html. Default: null
- successURL
Sets the url for redirection after successful form submission. Default: "/"
- errorClass
Sets the custom errorClass for the form fields. Default: ".invalid"
How it works
Click event on trigger element opens modal with modalID
Form at formURL is appended to the element with modalContent class
On submit the form is POSTed via AJAX request to formURL
Unsuccessful POST request returns errors, which are shown under form fields in modal
Successful POST request redirects to successURL
Contribute
This is an Open Source project and any contribution is appriciated.
License
This project is licensed under the MIT License.
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Hashes for django-bootstrap-modal-forms-1.1.0.tar.gz
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | a02618036b67887e6de1689b85fa5afc1f896fedadb65543b84b39ce6b30aecc |
|
| MD5 | d82c2032c2fd7a2d5d93ea2a7c5aeea3 |
|
| BLAKE2b-256 | 9bbd7d5c52e56904b05abe6d40184edff491967ef7bd1848ffc2c3ee4984e7fa |
