Настройки 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 %}
app/static/app/formset_handlers.js
(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 type="text/javascript" src="{% static 'app/unregistered_handlers.js' %}"></script>
{% endblock %}
app/static/app/unregistered_handlers.js
django.jQuery(document).on('formset:added', function(event, $row, formsetName) {
    // Row added
});

django.jQuery(document).on('formset:removed', function(event, $row, formsetName) {
    // Row removed
});
Вернуться на верх