Skip to main content

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

$ pip install django-modal-forms [--upgrade]

Setup

  1. Add modal_forms & widget_tweaks to INSTALLED_APPS:
# settings.py

INSTALLED_APPS = [
    'widget_tweaks',
    'modal_forms',
]
  1. 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)
  1. 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

  1. 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)
  1. 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>&times;</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


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django-modal-forms-2.0.tar.gz (7.1 kB view details)

Uploaded Source

Built Distribution

django_modal_forms-2.0-py3-none-any.whl (8.1 kB view details)

Uploaded Python 3

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

Hashes for django-modal-forms-2.0.tar.gz
Algorithm Hash digest
SHA256 11877f6ed3409bfa7736d713eac41ca59ab5a19a04338584f16877371874814b
MD5 36a1409fbc7c30a53c575e0176ea3a7f
BLAKE2b-256 8c5b01856ac24121a165723f6ca4b071f104c795ff9d143a03bc83d9e6b1dd5d

See more details on using hashes here.

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

Hashes for django_modal_forms-2.0-py3-none-any.whl
Algorithm Hash digest
SHA256 3b19ac162cc99e2abde179239422e5d8fdf237eec18913f573320d07a60b528a
MD5 8019d6ae565108654458d4dc964fb1e6
BLAKE2b-256 78e66df8386ed118f8ac90e664db472e4feea6caaad4ede66472e4686c77084f

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page