• 3.1
  • 3.2
  • 6.1
  • Версия документации: 5.0

Настройки 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 %}
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)
    }
})
Back to Top