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

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

Вы можете выполнить JavaScript-код, когда встраиваемая форма добавляется или удаляется в форме изменения админки. Для этого используются jQuery-события formset:added и formset:removed. Обработчик события получает три аргумента:

• event — это событие jQuery.
• $row — это новая (или удалённая) строка.
• formsetName — это набор форм, которому принадлежит строка.

Событие срабатывает с использованием пространства имён django.jQuery.

В вашем собственном шаблоне change_form.html, расширьте блок admin_change_form_document_ready и добавьте в него код обработчика события:

{% extends 'admin/change_form.html' %}

{% block admin_change_form_document_ready %}
{{ block.super }}
<script type="text/javascript">
(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);
</script>
{% endblock %}

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

• Код JavaScript должен находиться в блоке шаблона, если вы наследуете admin/change_form.html, иначе он не будет отображаться в окончательном HTML.
• {{ block.super }} добавлен, потому что блок admin_change_form_document_ready Django содержит JavaScript-код для обработки различных операций в форме изменения, и нам нужно, чтобы он тоже отображался.

Иногда вам нужно работать с плагинами jQuery, которые не зарегистрированы в пространстве имен django.jQuery. Для этого просто измените способ прослушивания событий. Вместо обертывания обработчика события в пространстве имен django.jQuery, прослушивайте события, которые срабатывают оттуда. Например:

{% extends 'admin/change_form.html' %}

{% block admin_change_form_document_ready %}
{{ block.super }}
<script type="text/javascript">
    django.jQuery(document).on('formset:added', function(event, $row, formsetName) {
        // Row added
    });

    django.jQuery(document).on('formset:removed', function(event, $row, formsetName) {
        // Row removed
    });
</script>
{% endblock %}