Django Forms in Bootstrap Modals
Project description
django-modal-forms
A Python package that seamlessly integrates Django forms within Bootstrap modals.
Features:
- Django forms within Bootstrap modals
- Adding & editing within single form
- Multiple forms per view page
- Validation & error handling
- Templates for Bootstrap 3 & 4
Dependencies:
- Django
- Bootstrap
- jQuery
Installation
- Via PyPi:
$ pip install django-modal-forms [--upgrade]
Setup
- Add
modal_forms
&widget_tweaks
toINSTALLED_APPS
:
# settings.py
INSTALLED_APPS = [
'widget_tweaks',
'modal_forms',
]
- Add endpoint for serialized form data to each app where package will be used:
# urls.py
from . import views
urlpatterns = [
path('mf-data/<name>/', views.mf_data),
path('mf-data/<name>/<int:pk>', views.mf_data),
]
# views.py
from django.http import HttpResponse
from modal_forms import ModalForm
from . import forms
def mf_data(request, name, pk=None):
form = getattr(forms, name)()
mf = ModalForm(form, request, pk)
data = mf.serialize_form()
return HttpResponse(data)
- Add script reference & hidden inputs to base template of each app where package will be used:
<!-- base.html -->
<script src="{% static "modal_forms/js/script.js" %}"></script>
<input type="hidden" id="mf-url-base" value="/mf-data">
{% if invalid_form %}
<input
type="hidden"
id="mf-error"
data-mf_name="{{ invalid_form.name }}"
data-mf_pk="{{ invalid_form.pk }}"
>
{% endif %}
Basic Usage
- Add forms & handlers to views methods:
# views.py
from django.shortcuts import render
from modal_forms import ModalForm
from . import forms, models
def view(request):
entities = models.Entity.objects.all()
invalid_form = None
page_forms = {
'entity': forms.EntityForm(auto_id="EntityForm_%s"),
}
if request.POST:
name = request.POST.get('mf-name', None)
pk = request.POST.get('mf-pk', None)
mf = ModalForm(page_forms[name], request, pk)
page_forms[name], invalid_form = mf.process_form()
context = {
'forms': page_forms,
'invalid_form': invalid_form,
'entities': entities,
}
return render(request, 'view.html', context)
- Add form triggers & modals to templates:
<!-- view.html -->
<button
class="btn btn-primary mf-btn"
data-mf_name="EntityForm"
data-mf_pk="0"
>
Add Entity
</button>
{% for e in entities %}
<button
class="btn btn-primary mf-btn"
data-mf_name="EntityForm"
data-mf_pk="{{ e.id }}"
>
Edit Entity
</button>
{% endfor %}
<div class="modal" id="mf-EntityForm" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
<span class="mf-action-label"></span>
Entity
</h5>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<form method="post" action="">
{% csrf_token %}
<input type="hidden" name="mf-name" value="entity">
<input type="hidden" name="mf-pk" value="">
<div class="modal-body">
{% include "modal_forms/bootstrap4/form_horizontal.html" with form=forms.entity col_label=4 col_field=8 %}
</div>
<div class="modal-footer text-right">
<button type="submit" class="btn btn-primary">
Submit
</button>
</div>
</form>
</div>
</div>
</div>
Advanced Usage
- Setting default field values:
<!-- view.html -->
<button
class="btn btn-primary mf-btn"
data-mf_name="EntityForm"
data-mf_pk="0"
data-mf_defaults='{"form_field_1":"default-value-1","form_field_2":"default-value-2"}'
>
Add Entity
</button>
- Excluding fields from serialization:
<!-- view.html -->
<button
class="btn btn-primary mf-btn"
data-mf_name="EntityForm"
data-mf_pk="0"
data-mf_excluded='["form_field_1","form_field_2"]'
>
Add Entity
</button>
Development
- Starting example app server:
$ python example/manage.py runserver
- Building package:
$ python setup.py sdist bdist_wheel
- Installing package locally:
$ pip install dist/django-modal-forms-[VERSION].tar.gz [--upgrade]
- Uploading package to PyPI:
$ twine upload --skip-existing dist/*
References
Project details
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
Built Distribution
File details
Details for the file django-modal-forms-2.0.tar.gz
.
File metadata
- Download URL: django-modal-forms-2.0.tar.gz
- Upload date:
- Size: 7.1 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/3.1.1 pkginfo/1.5.0.1 requests/2.22.0 setuptools/45.0.0 requests-toolbelt/0.9.1 tqdm/4.42.0 CPython/3.7.3
File hashes
Algorithm | Hash digest | |
---|---|---|
SHA256 | 11877f6ed3409bfa7736d713eac41ca59ab5a19a04338584f16877371874814b |
|
MD5 | 36a1409fbc7c30a53c575e0176ea3a7f |
|
BLAKE2b-256 | 8c5b01856ac24121a165723f6ca4b071f104c795ff9d143a03bc83d9e6b1dd5d |
File details
Details for the file django_modal_forms-2.0-py3-none-any.whl
.
File metadata
- Download URL: django_modal_forms-2.0-py3-none-any.whl
- Upload date:
- Size: 8.1 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/3.1.1 pkginfo/1.5.0.1 requests/2.22.0 setuptools/45.0.0 requests-toolbelt/0.9.1 tqdm/4.42.0 CPython/3.7.3
File hashes
Algorithm | Hash digest | |
---|---|---|
SHA256 | 3b19ac162cc99e2abde179239422e5d8fdf237eec18913f573320d07a60b528a |
|
MD5 | 8019d6ae565108654458d4dc964fb1e6 |
|
BLAKE2b-256 | 78e66df8386ed118f8ac90e664db472e4feea6caaad4ede66472e4686c77084f |