diff options
Diffstat (limited to 'docs/ref/contrib/admin/javascript.txt')
| -rw-r--r-- | docs/ref/contrib/admin/javascript.txt | 59 |
1 files changed, 15 insertions, 44 deletions
diff --git a/docs/ref/contrib/admin/javascript.txt b/docs/ref/contrib/admin/javascript.txt index 05731c57b0..ce94176691 100644 --- a/docs/ref/contrib/admin/javascript.txt +++ b/docs/ref/contrib/admin/javascript.txt @@ -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 - }); |
