| Name | django-crisp-modals JSON |
| Version |
2025.3.29
JSON |
| download |
| home_page | None |
| Summary | Django Crispy Forms inside Bootstrap Modals |
| upload_time | 2025-03-19 05:24:57 |
| maintainer | None |
| docs_url | None |
| author | Michel Fodje |
| requires_python | >=3.10 |
| license | MIT |
| keywords |
|
| VCS |
 |
| bugtrack_url |
|
| requirements |
No requirements were recorded.
|
| Travis-CI |
No Travis.
|
| coveralls test coverage |
No coveralls.
|
django-crisp-modals
===================
django-crisp-modals is a Django app which provides support for ajax Django Crispy Forms
inside Bootstrap 5 modal dialogs. The app provides various views, form classes, templates and
javascript. A demo site showcasing an example configuration various features, is available in the repository.
Quick start
-----------
1. Add "crisp_modals", and "crispy_forms" to your INSTALLED_APPS setting like this::
```python
INSTALLED_APPS = [
...,
"crispy_forms",
"crispy_bootstrap5",
"crisp_modals",
]
2. Add the following to your settings.py file::
```python
CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"
CRISPY_TEMPLATE_PACK = "bootstrap5"
3. Include the `crisp_modals/modals.min.js` within your base template after jQuery
and add a blank modal div to the bottom of the body tag. The modal div should have the id: `modal-target`.
Then initialize the modal target. For example:
```html
{% load static %}
...
<div id="modal-target"></div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-form@4.3.0/dist/jquery.form.min.js"></script>
<script src="{% static 'crisp_modals/modals.min.js' %}"></script>
<script>
$(document).ready(function() {
$('#modal-target').initModal();
});
window.setupModal = function(element) {
// Add any additional setup code here to be executed for each modal
}
</script>
4. Create forms as follows. The main crispy-forms helper is available as `self.body` within the forms.
A footer helper is also available as `self.footer`, with submit and reset buttons already included.
```python
from crisp_modals.forms import ModalModelForm, Row, FullWidth
class PollForm(ModalModelForm):
class Meta:
model = Poll
fields = ['question', 'pub_date']
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
if self.instance.pk:
self.body.form_action = reverse('polls:poll-update', kwargs={'pk': self.instance.pk})
else:
self.body.form_action = reverse('polls:poll-create')
self.body.append(
Row(
FullWidth('question', placeholder='Enter your question'),
),
Row(
FullWidth('pub_date', placeholder='Enter the publication date'),
)
)
5. In your views, use the ModalCreateView, ModalUpdateView, and ModalDeleteView classes as follows. Include
`delete_url` in the form kwargs for the ModalUpdateView class to show the delete button within the form.
```python
from crisp_modals.views import ModalCreateView, ModalUpdateView, ModalDeleteView
class PollCreateView(ModalCreateView):
model = Poll
form_class = PollForm
class PollCreateView(ModalUpdateView):
model = Poll
form_class = PollForm
def get_form_kwargs(self):
kwargs = super().get_form_kwargs()
kwargs['delete_url'] = reverse('polls:poll-delete', kwargs={'pk': self.object.pk})
return kwargs
class PollDeleteView(ModalDeleteView):
model = Poll
6. To distinguish regular links from links that target modals, use the 'data-modal-url' attribute instead of href.
For example:
```html
<a href="#0" data-modal-url="{% url 'polls:poll-create' %}" class="modal-link">Create Poll</a>
<a href="#0" data-modal-url="{% url 'polls:poll-update' pk=poll.pk %}">Update Poll</a>
> Note:
>
> The `data-modal-url` attribute should contain the url of the view that will render the modal. It doesn't have to
> return a form. Non-form modal content can be rendered by overriding the `modal_content` block in the modal template
> `crisp_modals/modal.html`. The following blocks are available for overriding: `modal_header`, `modal_body`, `modal_footer`,
> `modal_scripts`. The `modal_scripts` block should be used to include any additional javascript required for the modal
> content.
Raw data
{
"_id": null,
"home_page": null,
"name": "django-crisp-modals",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.10",
"maintainer_email": null,
"keywords": null,
"author": "Michel Fodje",
"author_email": "michel4j@gmail.com",
"download_url": "https://files.pythonhosted.org/packages/3c/e4/9582096124a1b02ae9a9dde96b184dca4374464f15f24fca05f9aa3f2896/django_crisp_modals-2025.3.29.tar.gz",
"platform": null,
"description": "\ndjango-crisp-modals\n===================\n\ndjango-crisp-modals is a Django app which provides support for ajax Django Crispy Forms\ninside Bootstrap 5 modal dialogs. The app provides various views, form classes, templates and \njavascript. A demo site showcasing an example configuration various features, is available in the repository.\n\n\nQuick start\n-----------\n\n1. Add \"crisp_modals\", and \"crispy_forms\" to your INSTALLED_APPS setting like this::\n ```python\n INSTALLED_APPS = [\n ...,\n \"crispy_forms\",\n \"crispy_bootstrap5\",\n \"crisp_modals\",\n ]\n2. Add the following to your settings.py file::\n\n ```python\n CRISPY_ALLOWED_TEMPLATE_PACKS = \"bootstrap5\"\n CRISPY_TEMPLATE_PACK = \"bootstrap5\"\n\n3. Include the `crisp_modals/modals.min.js` within your base template after jQuery\n and add a blank modal div to the bottom of the body tag. The modal div should have the id: `modal-target`. \n Then initialize the modal target. For example:\n\n ```html \n {% load static %}\n ...\n <div id=\"modal-target\"></div>\n <script src=\"https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/jquery-form@4.3.0/dist/jquery.form.min.js\"></script>\n <script src=\"{% static 'crisp_modals/modals.min.js' %}\"></script>\n <script>\n $(document).ready(function() {\n $('#modal-target').initModal();\n });\n window.setupModal = function(element) {\n // Add any additional setup code here to be executed for each modal\n }\n </script>\n \n4. Create forms as follows. The main crispy-forms helper is available as `self.body` within the forms. \n A footer helper is also available as `self.footer`, with submit and reset buttons already included.\n \n ```python\n from crisp_modals.forms import ModalModelForm, Row, FullWidth\n\n class PollForm(ModalModelForm):\n class Meta:\n model = Poll\n fields = ['question', 'pub_date']\n \n def __init__(self, *args, **kwargs):\n super().__init__(*args, **kwargs)\n if self.instance.pk:\n self.body.form_action = reverse('polls:poll-update', kwargs={'pk': self.instance.pk})\n else:\n self.body.form_action = reverse('polls:poll-create')\n self.body.append(\n Row(\n FullWidth('question', placeholder='Enter your question'),\n ),\n Row(\n FullWidth('pub_date', placeholder='Enter the publication date'),\n )\n )\n\n5. In your views, use the ModalCreateView, ModalUpdateView, and ModalDeleteView classes as follows. Include\n `delete_url` in the form kwargs for the ModalUpdateView class to show the delete button within the form.\n \n ```python\n from crisp_modals.views import ModalCreateView, ModalUpdateView, ModalDeleteView\n\n class PollCreateView(ModalCreateView):\n model = Poll\n form_class = PollForm\n\n class PollCreateView(ModalUpdateView):\n model = Poll\n form_class = PollForm\n \n def get_form_kwargs(self):\n kwargs = super().get_form_kwargs()\n kwargs['delete_url'] = reverse('polls:poll-delete', kwargs={'pk': self.object.pk})\n return kwargs\n \n class PollDeleteView(ModalDeleteView):\n model = Poll\n \n\n \n6. To distinguish regular links from links that target modals, use the 'data-modal-url' attribute instead of href.\n For example:\n\n ```html\n <a href=\"#0\" data-modal-url=\"{% url 'polls:poll-create' %}\" class=\"modal-link\">Create Poll</a>\n <a href=\"#0\" data-modal-url=\"{% url 'polls:poll-update' pk=poll.pk %}\">Update Poll</a>\n\n> Note: \n> \n> The `data-modal-url` attribute should contain the url of the view that will render the modal. It doesn't have to \n> return a form. Non-form modal content can be rendered by overriding the `modal_content` block in the modal template\n> `crisp_modals/modal.html`. The following blocks are available for overriding: `modal_header`, `modal_body`, `modal_footer`,\n> `modal_scripts`. The `modal_scripts` block should be used to include any additional javascript required for the modal \n> content.\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "Django Crispy Forms inside Bootstrap Modals",
"version": "2025.3.29",
"project_urls": {
"Homepage": "https://github.com/michel4j/django-crisp-modals",
"Issues": "https://github.com/michel4j/django-crisp-modals/issues"
},
"split_keywords": [],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "608033d2d95aaf6d6afbaae871c25d85c884074c5c48bdc21c3eef791c4cdd26",
"md5": "4891f0b1041bad6c8e4dd64c6d5008e6",
"sha256": "87d00e1a12d5ddcfb82f9abf33f0661e7397903f935c4815c92efd0127223810"
},
"downloads": -1,
"filename": "django_crisp_modals-2025.3.29-py3-none-any.whl",
"has_sig": false,
"md5_digest": "4891f0b1041bad6c8e4dd64c6d5008e6",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.10",
"size": 14204,
"upload_time": "2025-03-19T05:24:56",
"upload_time_iso_8601": "2025-03-19T05:24:56.121904Z",
"url": "https://files.pythonhosted.org/packages/60/80/33d2d95aaf6d6afbaae871c25d85c884074c5c48bdc21c3eef791c4cdd26/django_crisp_modals-2025.3.29-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "3ce49582096124a1b02ae9a9dde96b184dca4374464f15f24fca05f9aa3f2896",
"md5": "5171a2fc5241c8437137a00c7f6792b4",
"sha256": "3fdd669b8436f3c9b296284cf19b60b814c83c4c4e3743c13595ed5e16dc6080"
},
"downloads": -1,
"filename": "django_crisp_modals-2025.3.29.tar.gz",
"has_sig": false,
"md5_digest": "5171a2fc5241c8437137a00c7f6792b4",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.10",
"size": 10999,
"upload_time": "2025-03-19T05:24:57",
"upload_time_iso_8601": "2025-03-19T05:24:57.339121Z",
"url": "https://files.pythonhosted.org/packages/3c/e4/9582096124a1b02ae9a9dde96b184dca4374464f15f24fca05f9aa3f2896/django_crisp_modals-2025.3.29.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-03-19 05:24:57",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "michel4j",
"github_project": "django-crisp-modals",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"lcname": "django-crisp-modals"
}
