JavaScript-настройки в админке

События инлайн-форм

Вы можете выполнить JavaScript-код, когда инлайн-форма добавляется или удаляется в форме изменения админки. События formset:added и formset:removed позволяют это сделать. event.detail.formsetName — это набор форм, к которому относится строка. Для события formset:added, event.target — это новая добавленная строка.

В вашем пользовательском change_form.html шаблоне расширьте блок admin_change_form_document_ready и добавьте код обработчика событий:

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

{% block admin_change_form_document_ready %}
{{ block.super }}
<script src="{% static 'app/formset_handlers.js' %}"></script>
{% endblock %}

document.addEventListener('formset:added', (event) => {
    if (event.detail.formsetName == 'author_set') {
        // Do something
    }
});
document.addEventListener('formset:removed', (event) => {
    // Row removed
});

Следует учесть два момента:

• JavaScript-код должен находиться в блоке шаблона, если вы наследуете admin/change_form.html, иначе он не будет отображён в окончательном HTML.
• {{ block.super }} добавлен, потому что блок admin_change_form_document_ready Django содержит JavaScript-код для обработки различных операций в форме изменения, и его также нужно отобразить.

Поддержка версий Django, младше 4.1

Если ваш обработчик событий всё ещё должен поддерживать более старые версии Django, вы должны использовать jQuery для регистрации обработчика событий. jQuery обрабатывает JavaScript-события, но обратное неверно.

Можно проверить наличие event.detail.formsetName и перейти к старой сигнатуре обработчика следующим образом:

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