summaryrefslogtreecommitdiff
path: root/docs/ref/contrib/admin/javascript.txt
diff options
context:
space:
mode:
Diffstat (limited to 'docs/ref/contrib/admin/javascript.txt')
-rw-r--r--docs/ref/contrib/admin/javascript.txt59
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
- });