Fixed #15760 -- Added JavaScript events for admin inline forms.

2 files changed, 78 insertions, 0 deletions

diff --git a/docs/ref/contrib/admin/index.txt b/docs/ref/contrib/admin/index.txt
index 45f5e33df2..321c6d83ad 100644
--- a/docs/ref/contrib/admin/index.txt
+++ b/docs/ref/contrib/admin/index.txt
@@ -59,6 +59,7 @@ Other topics
 
    actions
    admindocs
+   javascript
 
 .. seealso::
 
@@ -1882,6 +1883,8 @@ The :doc:`staticfiles app </ref/contrib/staticfiles>` prepends
 ``None``) to any asset paths. The same rules apply as :ref:`regular asset
 definitions on forms <form-asset-paths>`.
 
+.. _contrib-admin-jquery:
+
 jQuery
 ~~~~~~
 
diff --git a/docs/ref/contrib/admin/javascript.txt b/docs/ref/contrib/admin/javascript.txt
new file mode 100644
index 0000000000..f953b269ad
--- /dev/null
+++ b/docs/ref/contrib/admin/javascript.txt
@@ -0,0 +1,75 @@
+======================================
+JavaScript customizations in the admin
+======================================
+
+.. _admin-javascript-inline-form-events:
+
+Inline form events
+==================
+
+.. versionadded:: 1.9
+
+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:
+
+* ``event`` is the ``jQuery`` event.
+* ``$row`` is the newly added (or removed) row.
+* ``formsetName`` is the formset the row belongs to.
+
+The event is fired using the :ref:`django.jQuery namespace
+<contrib-admin-jquery>`.
+
+In your custom ``change_form.html`` template, extend the
+``admin_change_form_document_ready`` block and add the event listener code:
+
+.. code-block:: html+django
+
+    {% extends 'admin/change_form.html' %}
+
+    {% block admin_change_form_document_ready %}
+    {{ block.super }}
+    <script type="text/javascript">
+    (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);
+    </script>
+    {% endblock %}
+
+Two points to keep in mind:
+
+* The JavaScript code must go in a template block if you are inheriting
+  ``admin/change_form.html`` or it won't be rendered in the final HTML.
+* ``{{ 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, simply change how the code
+listens for events. Instead of wrapping the listener in the ``django.jQuery``
+namespace, just listen to the event triggered from there. For example:
+
+.. code-block:: html+django
+
+    {% extends 'admin/change_form.html' %}
+
+    {% block admin_change_form_document_ready %}
+    {{ block.super }}
+    <script type="text/javascript">
+        django.jQuery(document).on('formset:added', function(event, $row, formsetName) {
+            // Row added
+        });
+
+        django.jQuery(document).on('formset:removed', function(event, $row, formsetName) {
+            // Row removed
+        });
+    </script>
+    {% endblock %}