In admin interface, autocomplete_fields not working and triggering JavaScript errors

Using Django Mystery Errors
1

Would love some help with this one. I can’t find anything online about this particular error and struggling to debug/troubleshoot. Thank you!

I’m receiving the following JavaScript error in the Django admin interface when trying to use autocomplete_fields. Consequently, the autocomplete drop-down widgets are not populated. We’re running Django 4.2.5. If I comment out the autocomplete_fields, the drop-down widget is populated correctly and things work. All of our code is open source here. The admin code is here.

image
image1616×710 118 KB

The admin model looks like:

@admin.register(Publication)
class PublicationAdmin(admin.ModelAdmin):
    autocomplete_fields = ['poster', 'video', 'talk']

And then each of these fields correspond to other admin models like:

@admin.register(Talk)
class TalkAdmin(admin.ModelAdmin):
    list_display = ('title', 'date', 'get_speakers_as_csv', 'forum_name', 'location', 'talk_type')

    # search_fields are used for auto-complete
    search_fields = ['title', 'forum_name']

Here are the errors:

Uncaught TypeError: Cannot read properties of undefined (reading 'define')
    at en.js:3:106
    at en.js:3:755

jquery.min.js:16 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at Function.each (jquery.min.js:16:11175)
    at prepopulate_init.js:5:7

Uncaught TypeError: $(...).select2 is not a function
    at HTMLSelectElement.<anonymous> (autocomplete.js:7:24)
    at Function.each (jquery.min.js:16:11390)
    at $.fn.djangoAdminSelect2 (autocomplete.js:6:11)
    at HTMLDocument.<anonymous> (autocomplete.js:27:60)
    at Object.resolveWith (jquery.min.js:16:14211)
    at Function.ready (jquery.min.js:16:9196)
    at HTMLDocument.y (jquery.min.js:16:13679)
2

I’ve found in your models that video is OneToOneField.

    video = models.OneToOneField(Video, on_delete=models.DO_NOTHING, null=True, blank=True)
    talk = models.ForeignKey(Talk, blank=True, null=True, on_delete=models.DO_NOTHING)
    poster = models.ForeignKey(Poster, blank=True, null=True, on_delete=models.DO_NOTHING)

and from official docs The Django admin site | Django documentation | Django here you can see that it is used with ForeignKey and/or ManyToManyField fields.

Also from ChatGPT I’ve got this
"Django’s autocomplete_fields feature primarily works with ForeignKey fields in the ModelAdmin. The purpose of autocomplete_fields is to provide a convenient interface for selecting related objects in the admin interface.

If you have a OneToOneField in your model, you might not be able to use autocomplete_fields directly on that field. However, you can use autocomplete_fields on the ForeignKey field that is on the other end of the OneToOneField relationship"

1 Like
3

Thanks for your response. But even if I remove videos from my autocomplete_fields—so it is: autocomplete_fields = ['poster', 'talk'], I still get the same error.

This feels like a bug to me on the JavaScript side of Django. But I just don’t seem to have the skills to figure it out.

If you dive into

jquery.min.js:16 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at Function.each (jquery.min.js:16:11175)
    at prepopulate_init.js:5:7

The failing line is around $.each(fields, function(index, field){ below

'use strict';
{
    const $ = django.jQuery;
    const fields = $('#django-admin-prepopulated-fields-constants').data('prepopulatedFields');
    $.each(fields, function(index, field) {
        $(
            '.empty-form .form-row .field-' + field.name +
            ', .empty-form.form-row .field-' + field.name +
            ', .empty-form .form-row.field-' + field.name
        ).addClass('prepopulated_field');
        $(field.id).data('dependency_list', field.dependency_list).prepopulate(
            field.dependency_ids, field.maxLength, field.allowUnicode
        );
    });
}
4

Try it with a “private” or “incognito” browser window to ensure it’s not some type of browser-cache related situation. (Or verify in your network tab and runserver console that these JavaScript files are actually being retrieved from the server and not using what is cached.)

1 Like
5

Thanks Ken. I just verified it’s not a browser-cache situation. :frowning:

6

Very superficially, it looks like the select2 module isn’t being loaded. Check your network tab when you’re loading that admin page to verify that select2 is being requested and retrieved.

Side note: I added the autoselect function to a project of mine, and it works fine for me under Django 4.2.5.

7

Thanks Ken. I will check that.

Note that it was working at some point but not sure when things started failing… (e.g., if it was related to a Django upgrade or some other code change).

8

So I had tested it originally under 4.2.7, then noticed you specifically referenced 4.2.5, so I downgraded my test environment. It worked fine in both cases.

(While bugs do make their way into Django, I always assume that any problem is mine until absolutely proven that the problem is elsewhere. I never assume the bug is Django’s unless I’ve exhausted all other possibilities or I find a ticket identifying the issue.)

1 Like
9

My philosophy is the same… but this is the first issue I’ve encountered in a long while with Django that I can’t figure out myself (e.g., via Stackoverflow sleuthing or simply debugging).

Will keep investigating. Thanks again.

1 Like