---
title: "Personnalisations de JavaScript dans l’interface d’administration"
version: 2.2
locale: fr
source: https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/javascript/
canonical: https://djangodocs.dev/fr/2.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 jQuery `formset:added` et `formset:removed` permettent de faire cela. Le gestionnaire d’événement reçoit trois paramètres :

- `event` est l’événement jQuery.
- `$row` est la ligne ajoutée (ou supprimée).
- `formsetName` est le jeu de formulaires auquel appartient la ligne.

L’événement est déclenché en utilisant l”[espace de noms django.jQuery](/fr/2.2/ref/contrib/admin/#contrib-admin-jquery).

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 type="text/javascript" src="{% static 'app/formset_handlers.js' %}"></script>
{% endblock %}
```

*app/static/app/formset\_handlers.js*

```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);
```

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.

Il est parfois utile de travailler avec des greffons `jQuery` qui ne sont pas inscrits dans l’espace de noms `django.jQuery`. Pour faire cela, changez simplement la façon dont le code écoute les événements. Au lieu d’envelopper la fonction d’écoute dans l’espace de noms `django.jQuery`, écoutez simplement l’événement qui est déclenché depuis là. Par exemple :

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

{% block admin_change_form_document_ready %}
{{ block.super }}
<script type="text/javascript" src="{% static 'app/unregistered_handlers.js' %}"></script>
{% endblock %}
```

*app/static/app/unregistered\_handlers.js*

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