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.

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