Personnalisations de JavaScript dans l’interface d’administrationLien vers cette rubrique#

Événements de sous-formulairesLien vers cette rubrique#

Il peut être souhaitable d’exécuter du code JavaScript lorsqu’un sous-formulaire est ajouté ou enlevé dans un formulaire de modification du site d’administration. Les évènements formset:added et formset:removed permettent de faire cela. event.detail.formsetName correspond au jeu de formulaires auquel appartient la ligne. Pour l’évènement formset:added, event.target correspond à la nouvelle ligne qui a été ajoutée.

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 %}

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.

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)
    }
})