Personnalisations de JavaScript dans l’interface d’administration

Événements de sous-formulaires

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 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.

Changed in Django 4.1:

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.

Dans votre gabarit change_form.html personnalisé, étendez le bloc admin_change_form_document_ready et ajoutez la fonction d’écoute avec ce code :

{% extends 'admin/change_form.html' %}
{% load static %}

{% block admin_change_form_document_ready %}
{{ block.super }}
<script src="{% static 'app/formset_handlers.js' %}"></script>
{% endblock %}

app/static/app/formset_handlers.js

document.addEventListener('formset:added', (event) => {
    if (event.detail.formsetName == 'author_set') {
        // Do something
    }
});
document.addEventListener('formset:removed', (event) => {
    // Row removed
});

Deux points à garder en tête :

• Le code JavaScript doit se trouver dans un bloc de gabarit si vous héritez de admin/change_form.html, sinon il ne sera pas produit dans le code HTML final.
• {{ block.super }} est ajouté car le bloc admin_change_form_document_ready contient du code JavaScript pour gérer diverses opérations dans le formulaire de modification et que nous avons besoin que ce contenu apparaisse aussi.

Supporting versions of Django older than 4.1

If your event listener still has to support older versions of Django you have to use jQuery to register your event listener. jQuery handles JavaScript events but the reverse isn’t true.

You could check for the presence of event.detail.formsetName and fall back to the old listener signature as follows:

function handleFormsetAdded(row, formsetName) {
    // Do something
}

$(document).on('formset:added', (event, $row, formsetName) => {
    if (event.detail && event.detail.formsetName) {
        // Django >= 4.1
        handleFormsetAdded(event.target, event.detail.formsetName)
    } else {
        // Django < 4.1, use $row and formsetName
        handleFormsetAdded($row.get(0), formsetName)
    }
})