Fix inline forms for django 4.1+

[guilleijo]

Django 4.1 changed the way the formset:added and formset:removed are called. $row and formsetName are no longer available, they need to be used from the event param.

When using a better array field in an inline admin the Add another button does not work on new items. The Uncaught TypeError: Cannot read properties of undefined (reading '0') error is seen in the console when adding a new inline item because $row is undefined.

From the django JavaScript customizations in the admin docs:

Changed in Django 4.1:
In older versions, the event was a jQuery event with $row and formsetName parameters. It is now a JavaScript CustomEvent with parameters set in event.detail.

See the Supporting versions of Django older than 4.1 section at the bottom of the page.

If your event listener still has to support older versions of Django you have to use jQuery to register your event listener. jQuery handles JavaScript events but the reverse isn’t true.

You could check for the presence of event.detail.formsetName and fall back to the old listener signature as follows:

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

Fixes #205

[parruc]

Would be nice to merge this pull request as the field does not work anymore in django >= 4.1

[guilleijo]

Would be nice to merge this pull request as the field does not work anymore in django >= 4.1

Yeah but it looks like this is not being maintained anymore.

What you can do to fix this locally in your project is the following:

1. Create a custom js file with the updated code from django_better_admin_arrayfield.js. For example: <app_name>/static/js/custom_django_better_admin_arrayfield.js
2. Use the custom js in the admin class that you need.

class SomeModelInline(admin.StackedInline):

    class Media:
        js = ("js/custom_django_better_admin_arrayfield.js",)

[parruc]

Yeah I guess it's not maintained anymore.

Because I don't like to put unmaintained packages in my projects I moved to https://github.com/bhch/django-jsonform that is awesome and looks very well maintained too.

Not exactly the same thing but the same effect can be achieved.

Thanks for the answer anyway. It could help somebody else.

[guilleijo]

Cool I'll take a look at that package. Thanks 👍