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

События форм в строке

Возможно, вам потребуется выполнить JavaScript-код, когда строка inline-формы добавляется или удаляется в форме изменения в админке. Для этого служат события 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)
    }
})