Настройка 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)
    }
})