{"title":"Personnalisations de JavaScript dans l’interface d’administration","version":"4.2","locale":"fr","docname":"ref/contrib/admin/javascript","url":"/fr/4.2/ref/contrib/admin/javascript/","canonical":"https://djangodocs.dev/fr/4.2/ref/contrib/admin/javascript/","summary":"Événements de sous-formulaires Lien vers cette rubrique # Il peut être souhaitable d’exécuter du code JavaScript lorsqu’un sous-formulaire est ajouté ou enlevé dans…","html":"

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

\n
\n

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

\n

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.

\n\n

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

\n
Django template
{% extends 'admin/change_form.html' %}\n{% load static %}\n\n{% block admin_change_form_document_ready %}\n{{ block.super }}\n<script src="{% static 'app/formset_handlers.js' %}"></script>\n{% endblock %}\n
\n
app/static/app/formset_handlers.js
\n
JavaScript
document.addEventListener('formset:added', (event) => {\n    if (event.detail.formsetName == 'author_set') {\n        // Do something\n    }\n});\ndocument.addEventListener('formset:removed', (event) => {\n    // Row removed\n});\n
\n

Deux points à garder en tête :

\n\n
\n

Prise en charge des versions Django plus anciennes que 4.1Lien vers cette rubrique#

\n

Si votre écouteur d’évènements doit encore prendre en charge des anciennes versions de Django, vous devez utiliser jQuery pour inscrire votre écouteur d’évènements. jQuery gère les évènements JavaScript, mais l’inverse n’est pas vrai.

\n

Vous pouvez vérifier la présence de event.detail.formsetName et vous rabattre alors sur l’ancienne signature de l’écouteur, comme ceci :

\n
JavaScript
function handleFormsetAdded(row, formsetName) {\n    // Do something\n}\n\n$(document).on('formset:added', (event, $row, formsetName) => {\n    if (event.detail && event.detail.formsetName) {\n        // Django >= 4.1\n        handleFormsetAdded(event.target, event.detail.formsetName)\n    } else {\n        // Django < 4.1, use $row and formsetName\n        handleFormsetAdded($row.get(0), formsetName)\n    }\n})\n
\n
\n
","rootId":"javascript-customizations-in-the-admin","toc":[{"title":"Événements de sous-formulaires","anchor":"inline-form-events","children":[{"title":"Prise en charge des versions Django plus anciennes que 4.1","anchor":"supporting-versions-of-django-older-than-4-1","children":[]}]}],"breadcrumbs":[{"docname":"ref/index","title":"Référence de l’API","url":"/fr/4.2/ref/"},{"docname":"ref/contrib/index","title":"Paquets contrib","url":"/fr/4.2/ref/contrib/"},{"docname":"ref/contrib/admin/index","title":"Le site d’administration de Django","url":"/fr/4.2/ref/contrib/admin/"}],"prev":{"docname":"ref/contrib/admin/admindocs","title":"Le générateur de documentation de l’administration de Django","url":"/fr/4.2/ref/contrib/admin/admindocs/"},"next":{"docname":"ref/contrib/auth","title":"django.contrib.auth","url":"/fr/4.2/ref/contrib/auth/"},"formats":{"html":"/fr/4.2/ref/contrib/admin/javascript/","markdown":"/fr/4.2/ref/contrib/admin/javascript.md","json":"/fr/4.2/ref/contrib/admin/javascript.json"},"source":"https://github.com/django/django/blob/stable/4.2.x/docs/ref/contrib/admin/javascript.txt","official":"https://docs.djangoproject.com/fr/4.2/ref/contrib/admin/javascript/","inVersions":["6.1","6.0","5.2","5.1","5.0","4.2","4.1","4.0","3.2","3.1","3.0","2.2","2.1","2.0","1.11","1.10","1.9"],"inLocales":["en","zh-hans","fr","ja","id","it","pt-br","ko","es","el","pl"]}