Настройки JavaScript в админке¶
События встроенной формы¶
Вы можете захотеть выполнить некоторый JavaScript при добавлении или удалении инлайн-формы в форме изменения администратора. События jQuery formset:added
и formset:removed
позволяют это сделать. Обработчику события передается три аргумента:
event
- это событиеjQuery
.$row
- это новый добавленный (или удаленный) ряд.formsetName
- это набор форм, к которому принадлежит строка.
Событие запускается с помощью django.jQuery namespace.
В пользовательском шаблоне change_form.html
расширьте блок admin_change_form_document_ready
и добавьте код слушателя событий:
{% extends 'admin/change_form.html' %}
{% load static %}
{% block admin_change_form_document_ready %}
{{ block.super }}
<script type="text/javascript" src="{% static 'app/formset_handlers.js' %}"></script>
{% endblock %}
(function($) {
$(document).on('formset:added', function(event, $row, formsetName) {
if (formsetName == 'author_set') {
// Do something
}
});
$(document).on('formset:removed', function(event, $row, formsetName) {
// Row removed
});
})(django.jQuery);
Следует иметь в виду два момента:
- Код JavaScript должен находиться в блоке шаблона, если вы наследуете
admin/change_form.html
, иначе он не будет отображен в конечном HTML. {{ block.super }}
добавлен потому, что блок Djangoadmin_change_form_document_ready
содержит код JavaScript для обработки различных операций в форме изменений, и нам нужно, чтобы он тоже был отображен.
Иногда вам нужно работать с плагинами jQuery
, которые не зарегистрированы в пространстве имен django.jQuery
. Для этого просто измените способ прослушивания событий в коде. Вместо того чтобы оборачивать слушателя в пространство имен django.jQuery
, просто слушайте событие, вызванное оттуда. Например:
{% extends 'admin/change_form.html' %}
{% load static %}
{% block admin_change_form_document_ready %}
{{ block.super }}
<script type="text/javascript" src="{% static 'app/unregistered_handlers.js' %}"></script>
{% endblock %}
django.jQuery(document).on('formset:added', function(event, $row, formsetName) {
// Row added
});
django.jQuery(document).on('formset:removed', function(event, $row, formsetName) {
// Row removed
});