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