You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

django-modal-forms

Package Overview
Dependencies
Maintainers
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

django-modal-forms

Django Forms in Bootstrap Modals

2.0
pipPyPI
Maintainers
1

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 to INSTALLED_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>&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

FAQs

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts