Fixed #33328 -- Transformed formset:added/removed to native JS events.

2 files changed, 19 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
-    });
diff --git a/docs/releases/4.1.txt b/docs/releases/4.1.txt
index 88f4069f40..46d0cf3540 100644
--- a/docs/releases/4.1.txt
+++ b/docs/releases/4.1.txt
@@ -412,6 +412,10 @@ Miscellaneous
 * The ``type="text/css"`` attribute is no longer included in ``<link>`` tags
   for CSS :doc:`form media </topics/forms/media>`.
 
+* ``formset:added`` and ``formset:removed`` JavaScript events are now pure
+  JavaScript events and don't depend on jQuery. See
+  :ref:`admin-javascript-inline-form-events` for more details on the change.
+
 .. _deprecated-features-4.1:
 
 Features deprecated in 4.1