---
title: "Personnalisations de JavaScript dans l’interface d’administration"
version: 5.2
locale: fr
source: https://docs.djangoproject.com/fr/5.2/ref/contrib/admin/javascript/
canonical: https://djangodocs.dev/fr/5.2/ref/contrib/admin/javascript/
---
# Personnalisations de JavaScript dans l’interface d’administration

## Événements de sous-formulaires

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 :

```html+django
{% 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`*

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

### Prise en charge des versions Django plus anciennes que 4.1

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.

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

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