admin アプリケーションの JavaScript カスタマイズ¶
インラインフォームイベント¶
インラインフォームが admin アプリケーション変更フォームに追加または削除された際に JavaScript を実行したい場合、formset:added
と formset:removed
イベントを使用できます。event.detail.formsetName
は行が属するフォームセットを示します。 formset:added
イベントでは、event.target
は新しく追加された行です。
カスタムの 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
});
注意点が2つあります:
もし
admin/change_form.html
を継承しているなら、JavaScript コードはテンプレートブロック内に配置する必要があります。そうしないと、最終的な HTML にレンダリングされません。Django の
admin_change_form_document_ready
ブロックには、変更フォーム内でのさまざまな操作を処理するための JavaScript コードが含まれており、{{ block.super }}
は、それらもレンダリングする必要があるために追加されています。
バージョン4.1より前のDjangoをサポートする¶
もしイベントリスナーが古いバージョンの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)
}
})