mirror of
https://github.com/django/django.git
synced 2025-07-24 13:44:32 +00:00
Fixed #33328 -- Transformed formset:added/removed to native JS events.
This commit is contained in:
parent
1f42a352e0
commit
eabc22f919
5 changed files with 42 additions and 66 deletions
|
@ -8,15 +8,15 @@ Inline form events
|
|||
==================
|
||||
|
||||
You may want to execute some JavaScript when an inline form is added or removed
|
||||
in the admin change form. The ``formset:added`` and ``formset:removed`` jQuery
|
||||
events allow this. The event handler is passed three arguments:
|
||||
in the admin change form. The ``formset:added`` and ``formset:removed`` events
|
||||
allow this. ``event.detail.formsetName`` is the formset the row belongs to.
|
||||
For the ``formset:added`` event, ``event.target`` is the newly added row.
|
||||
|
||||
* ``event`` is the ``jQuery`` event.
|
||||
* ``$row`` is the newly added (or removed) row.
|
||||
* ``formsetName`` is the formset the row belongs to.
|
||||
.. versionchanged:: 4.1
|
||||
|
||||
The event is fired using the :ref:`django.jQuery namespace
|
||||
<contrib-admin-jquery>`.
|
||||
In older versions, the event was a ``jQuery`` event with ``$row`` and
|
||||
``formsetName`` parameters. It is now a JavaScript ``CustomEvent`` with
|
||||
parameters set in ``event.detail``.
|
||||
|
||||
In your custom ``change_form.html`` template, extend the
|
||||
``admin_change_form_document_ready`` block and add the event listener code:
|
||||
|
@ -34,17 +34,14 @@ In your custom ``change_form.html`` template, extend the
|
|||
.. code-block:: javascript
|
||||
:caption: app/static/app/formset_handlers.js
|
||||
|
||||
(function($) {
|
||||
$(document).on('formset:added', function(event, $row, formsetName) {
|
||||
if (formsetName == 'author_set') {
|
||||
// Do something
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('formset:removed', function(event, $row, formsetName) {
|
||||
// Row removed
|
||||
});
|
||||
})(django.jQuery);
|
||||
document.addEventListener('formset:added', (event) => {
|
||||
if (event.detail.formsetName == 'author_set') {
|
||||
// Do something
|
||||
}
|
||||
});
|
||||
document.addEventListener('formset:removed', (event) => {
|
||||
// Row removed
|
||||
});
|
||||
|
||||
Two points to keep in mind:
|
||||
|
||||
|
@ -53,29 +50,3 @@ Two points to keep in mind:
|
|||
* ``{{ block.super }}`` is added because Django's
|
||||
``admin_change_form_document_ready`` block contains JavaScript code to handle
|
||||
various operations in the change form and we need that to be rendered too.
|
||||
|
||||
Sometimes you'll need to work with ``jQuery`` plugins that are not registered
|
||||
in the ``django.jQuery`` namespace. To do that, change how the code listens for
|
||||
events. Instead of wrapping the listener in the ``django.jQuery`` namespace,
|
||||
listen to the event triggered from there. For example:
|
||||
|
||||
.. code-block:: html+django
|
||||
|
||||
{% extends 'admin/change_form.html' %}
|
||||
{% load static %}
|
||||
|
||||
{% block admin_change_form_document_ready %}
|
||||
{{ block.super }}
|
||||
<script src="{% static 'app/unregistered_handlers.js' %}"></script>
|
||||
{% endblock %}
|
||||
|
||||
.. code-block:: javascript
|
||||
:caption: app/static/app/unregistered_handlers.js
|
||||
|
||||
django.jQuery(document).on('formset:added', function(event, $row, formsetName) {
|
||||
// Row added
|
||||
});
|
||||
|
||||
django.jQuery(document).on('formset:removed', function(event, $row, formsetName) {
|
||||
// Row removed
|
||||
});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue