django-autocomplete-light: 3.5.1 new Media order is not safely compatible with ModelAdmin.autocomplete_fields

In the following setup, one inline uses autocomplete_fields the other inline uses DAL.

It works in 3.5.0. In order to work in 3.5.1. the Media meta-calss should also be defined in the inline that uses autocomplete_fields.

class WithDALForm(forms.ModelForm):
    field_with_DAL = forms.ModelMultipleChoiceField(
        ...
        widget=autocomplete.ModelSelect2Multiple()
    )

    class Media:
        js = ("//code.jquery.com/jquery-3.4.1.min.js",)


class WithDALInline(admin.StackedInline):
    form = WithDALForm


class WithAutocompleteInline(admin.StackedInline)
    autocomplete_fields = ('field_1', 'field_2')


class Admin(admin.ModelAdmin):
    inlines = ('WithAutocompleteInline', 'WithDALIline')

What follows is the order of the scripts in each case:

3.5.1 with admin autocomplete (not working):

<script type="text/javascript" src="/static/admin/js/vendor/jquery/jquery.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/jquery.init.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/static/admin/js/vendor/select2/select2.full.js"></script>
<script type="text/javascript" src="/static/vendor/select2/dist/js/select2.full.js"></script>
<script type="text/javascript" src="/static/admin/js/vendor/select2/i18n/en.js"></script>
<script type="text/javascript" src="/static/vendor/select2/dist/js/i18n/en.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/autocomplete.init.js"></script>
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/inlines.js"></script>
<script type="text/javascript" src="/static/admin/js/autocomplete.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/forward.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/select2.js"></script>
<script type="text/javascript" src="/static/admin/js/collapse.js"></script>
<script type="text/javascript" src="/static/admin/js/actions.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/jquery.post-setup.js"></script>
<script type="text/javascript" src="/static/admin/js/urlify.js"></script>
<script type="text/javascript" src="/static/admin/js/prepopulate.js"></script>
<script type="text/javascript" src="/static/admin/js/vendor/xregexp/xregexp.js"></script>

3.5.1 without admin autocomplete (working):

<script type="text/javascript" src="/static/admin/js/vendor/jquery/jquery.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/jquery.init.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/vendor/select2/dist/js/select2.full.js"></script>
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/inlines.js"></script>
<script type="text/javascript" src="/static/vendor/select2/dist/js/i18n/en.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/autocomplete.init.js"></script>
<script type="text/javascript" src="/static/admin/js/collapse.js"></script>
<script type="text/javascript" src="/static/admin/js/actions.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/forward.js"></script>
<script type="text/javascript" src="/static/admin/js/urlify.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/select2.js"></script>
<script type="text/javascript" src="/static/admin/js/prepopulate.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/jquery.post-setup.js"></script>
<script type="text/javascript" src="/static/admin/js/vendor/xregexp/xregexp.js"></script>

3.5.0 with admin autocomplete (working):

<script type="text/javascript" src="/static/admin/js/vendor/jquery/jquery.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/static/admin/js/vendor/select2/select2.full.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/vendor/select2/i18n/en.js"></script>
<script type="text/javascript" src="/static/vendor/select2/dist/js/select2.full.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/vendor/select2/dist/js/i18n/en.js"></script>
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/inlines.js"></script>
<script type="text/javascript" src="/static/admin/js/autocomplete.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/autocomplete.init.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/forward.js"></script>
<script type="text/javascript" src="/static/admin/js/collapse.js"></script>
<script type="text/javascript" src="/static/admin/js/actions.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/select2.js"></script>
<script type="text/javascript" src="/static/admin/js/urlify.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/jquery.post-setup.js"></script>
<script type="text/javascript" src="/static/admin/js/prepopulate.js"></script>
<script type="text/javascript" src="/static/admin/js/vendor/xregexp/xregexp.js"></script>

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 23 (21 by maintainers)

Most upvoted comments

As a workaround, I got it working in the admin by adding the following Media class to my ModelAdmin class (django 2.2, dal 3.5.1). In my case, one admin worked (with a regular django autocomplete) and one didn’t (without django autocomplete). I haven’t had the time to find a minimal workaround.

    class Media:
        css = {
            'screen': [
                "vendor/select2/dist/css/select2.css",
                "admin/css/vendor/select2/select2.css",
                "admin/css/autocomplete.css",
                "autocomplete_light/select2.css",
            ]
        }
        js = [
            "admin/js/vendor/jquery/jquery.js",
            "autocomplete_light/jquery.init.js",
            "vendor/select2/dist/js/select2.full.js",
            "admin/js/vendor/select2/select2.full.js",
            "admin/js/jquery.init.js",
        ]
+6
rogeriomgatto on May 22, 2020

All right, I’m trying to make the AutocompleteLight Web Component really ready, and have taken the following design decisions:

  • remove StencilJS: so we have pure ECMAScript just relying on Web Components standards instead of jQuery soup, initialization soup code, and any soup actually, after seeing that this was more performant to load: https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/
  • with a TDD rewrite of the code: spent quite some time with Jest, Moccha, Cypress, Playwright and the likes in JS, found it pretty boring and inconvenient, figured pytest-playwright (not working for me) was using Splinter under the hood, a browser lib in Python which I really liked, so went for Python powered browser tests, and they are insanely fast
  • trying pnpm instead of npm or yarn this time,

You can where it’s at here:

https://yourlabs.io/oss/autocomplete-light/-/tree/master/new

However, given that I’m getting away with Python powered TDD, pure ECMAScript without dependencies, I’m thinking “I might as well write my Web Component in Python”, yes, with Transcrypt … Extremely lightweight pure Python frontend development might become a reality, I confirm that throwing away my JS test code in favor of pytest-splinter was an extremely pleasant experience

And trashing typescript was really nice too, going pure TDD so no time nor need for that

+3
jpic on Dec 3, 2020

The reason I’m so much into Django is because it’s the fastest way that I know from an idea to production, particularly when using an MVC pattern like Django admin which for me is absolutely necessary to get more value out of less code.

Decoupling between apps like Django does is great, but from what I’ve seen: separating frontend and backend into two distinct projects makes it twice as costly to make a change, at the cost of DRYness. Basically I want my backend to be able to generate a sane default frontend, and override the bits I need.

So with web components I feel like I can get the best of both worlds: generating HTML with custom tags on the backend and let the browser load the web components which basically replace jquery plugins but WAY better in many ways.

I believe the big question is: where do you want to have your router ? You need a backend router for sure, do you also want to maintain a frontend router ? It seems to me like twice the work that won’t create any value for the users who actually just want something that works and don’t really care.

Offline first is appealing, but this won’t be magic and will have a cost in terms of development too, you need to deal with conflicts, you have to synchronize between the server DB and the DBs that are in all clients … also server side rendering is nice for SEO and performance.

I’m getting very close to the “replace turbolinks+stimulusjs with sveltejs in crudlfa+” item in my todo list, I started this morning but then figured I had to clean the hackerspace … I’m not planning on having a frontend router, but to bind clicks to a function that queries the server and updates the DOM, like turbolinks; same for the form: replace native POST with JS POST which is actually what crudlfa+ is already doing in its stimulusjs form_controller

Anyway, exciting stuff going on for sure !

Keep us up to date 😉

+1
jpic on Nov 26, 2020

As a workaround, I got it working in the admin by adding the following Media class to my ModelAdmin class (django 2.2, dal 3.5.1). In my case, one admin worked (with a regular django autocomplete) and one didn’t (without django autocomplete). I haven’t had the time to find a minimal workaround.

Thank you @rogeriomgatto ! This fixed jQuery loading in admin with Django 2.2.6 and DAL 3.5.1 for me as well.

+1
mrts on Jun 7, 2020
Read more comments on GitHub
← JWT: Manual installed JWT lib breaks application during RSA signed jwt verification
django-autocomplete-light: Cannot read property 'define' of undefined at dalLoadLanguage →