# Dokumentasi Django 4.2.9.dev20231204082947

# Penyesuaian JavaScript di admin

## Peristiwa-peristiwa formulir berderet

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

Dalam cetakan `change_form.html` penyesuaian anda, perpanjang blok `admin_change_form_document_ready` dan tambah kode pendengar kejadian:

    {% 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
    });

Dua poin untuk diingat:

- Kode JavaScript harus berada di blok cetakan jika anda mewarisi `admin/change_form.html` atau itu tidak akan dibangun dalam HTML akhir.
- `{{ block.super }}` ditambahkan karena blok `admin_change_form_document_ready` Django mengandung kode JavaScript untuk mengangani beragam tindakan dalam formulir rubah dan kami butuh itu dibangun juga.

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