Настройки 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 }}добавлен, потому что блок Djangoadmin_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)
}
})