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

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

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

Changed in Django 4.1:

В старых версиях событие представляло собой событие jQuery с параметрами $row и formsetName. Теперь это JavaScript CustomEvent с параметрами, заданными в event.detail.

В пользовательском шаблоне 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 %}
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
});

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

  • Код JavaScript должен находиться в блоке шаблона, если вы наследуете admin/change_form.html, иначе он не будет отображен в конечном HTML.
  • {{ block.super }} добавлен потому, что блок Django admin_change_form_document_ready содержит код 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)
    }
})
Вернуться на верх