JavaScript-anpassningar i administratören

Inline-formulärhändelser

Du kanske vill köra lite JavaScript när ett inline-formulär läggs till eller tas bort i adminändringsformuläret. Händelserna formset:added och formset:removed tillåter detta. event.detail.formsetName är den formuläruppsättning som raden tillhör. För händelsen formset:added är event.target den nyligen tillagda raden.

I din anpassade mall change_form.html utökar du blocket admin_change_form_document_ready och lägger till koden för eventlyssnaren:

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

{% block admin_change_form_document_ready %}
{{ block.super }}
<script src="{% static 'app/formset_handlers.js' %}"></script>
{% endblock %}

app/static/app/formset_handlers.js

document.addEventListener('formset:added', (event) => {
    if (event.detail.formsetName == 'author_set') {
        // Do something
    }
});
document.addEventListener('formset:removed', (event) => {
    // Row removed
});

Två saker att tänka på:

• JavaScript-koden måste placeras i ett mallblock om du ärver admin/change_form.html, annars kommer den inte att återges i den slutliga HTML-filen.

• {{ block.super }} läggs till eftersom Djangos block admin_change_form_document_ready innehåller JavaScript-kod för att hantera olika operationer i ändringsformuläret och vi behöver att det också renderas.

Stöd för versioner av Django äldre än 4.1

Om din eventlyssnare fortfarande måste stödja äldre versioner av Django måste du använda jQuery för att registrera din eventlyssnare. jQuery hanterar JavaScript-händelser men det omvända är inte sant.

Du kan kontrollera om det finns event.detail.formsetName och återgå till den gamla lyssnarsignaturen på följande sätt:

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)
    }
})