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