Настройки JavaScript в админке¶
События встроенной формы¶
You may want to execute some JavaScript when an inline form is added or removed
in the admin change form. The formset:added
and formset:removed
events
allow this. event.detail.formsetName
is the formset the row belongs to.
For the formset:added
event, event.target
is the newly added row.
В старых версиях событие представляло собой событие 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 %}
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)
}
})