JS loading order in Admin-Change_form changes from model to model

[Yaron Harel]

In _changeform_view ​https://github.com/django/django/blob/master/django/contrib/admin/options.py#L1538, the self.media and the adminForm media is being merged and then passed into rendering.
This line merges two lists of css and js.
The order of JS is important, and in this case (using Autocomplete-light package), it creates sitations where one change_form would load fine and another not to work fine because the js order changed.

In my project, autocomplete-light package should load before admin (in INSTALLED_APPS), but the MediaWidget merge function ​https://github.com/django/django/blob/master/django/forms/widgets.py#L99 switches the order sometimes.
self.media always contains regular admin js and css while adminForm.media contains autocomplete-light js
One example of result (media = self.media + adminForm.media)

self.media._js:
<class 'list'>: ['admin/js/vendor/jquery/jquery.js', 'admin/js/jquery.init.js', 'admin/js/core.js', 'admin/js/admin/RelatedObjectLookups.js', 'admin/js/actions.js', 'admin/js/urlify.js', 'admin/js/prepopulate.js', 'admin/js/vendor/xregexp/xregexp.js']

adminForm.media._js:
<class 'list'>: ['autocomplete_light/jquery.init.js', 'autocomplete_light/autocomplete.init.js', 'autocomplete_light/vendor/select2/dist/js/select2.full.js', 'autocomplete_light/vendor/select2/dist/js/i18n/en.js', 'autocomplete_light/forward.js', 'autocomplete_light/select2.js', 'admin/js/vendor/jquery/jquery.js', 'admin/js/jquery.init.js', 'admin/js/calendar.js', 'admin/js/admin/DateTimeShortcuts.js']

merge result -> media._js:
<class 'list'>: ['autocomplete_light/jquery.init.js', 'autocomplete_light/autocomplete.init.js', 'autocomplete_light/vendor/select2/dist/js/select2.full.js', 'autocomplete_light/vendor/select2/dist/js/i18n/en.js', 'autocomplete_light/forward.js', 'autocomplete_light/select2.js', 'admin/js/vendor/jquery/jquery.js', 'admin/js/jquery.init.js', 'admin/js/core.js', 'admin/js/admin/RelatedObjectLookups.js', 'admin/js/actions.js', 'admin/js/urlify.js', 'admin/js/prepopulate.js', 'admin/js/vendor/xregexp/xregexp.js', 'admin/js/calendar.js', 'admin/js/admin/DateTimeShortcuts.js']

other change_form page:

self.media._js:
<class 'list'>: ['admin/js/vendor/jquery/jquery.js', 'admin/js/jquery.init.js', 'admin/js/core.js', 'admin/js/admin/RelatedObjectLookups.js', 'admin/js/actions.js', 'admin/js/urlify.js', 'admin/js/prepopulate.js', 'admin/js/vendor/xregexp/xregexp.js']

adminForm.media._js:
<class 'list'>: ['autocomplete_light/jquery.init.js', 'autocomplete_light/autocomplete.init.js', 'autocomplete_light/vendor/select2/dist/js/select2.full.js', 'autocomplete_light/vendor/select2/dist/js/i18n/en.js', 'autocomplete_light/forward.js', 'autocomplete_light/select2.js']

merge result -> media._js:
<class 'list'>: ['admin/js/vendor/jquery/jquery.js', 'admin/js/jquery.init.js', 'admin/js/core.js', 'admin/js/admin/RelatedObjectLookups.js', 'admin/js/actions.js', 'admin/js/urlify.js', 'admin/js/prepopulate.js', 'admin/js/vendor/xregexp/xregexp.js', 'autocomplete_light/jquery.init.js', 'autocomplete_light/autocomplete.init.js', 'autocomplete_light/vendor/select2/dist/js/select2.full.js', 'autocomplete_light/vendor/select2/dist/js/i18n/en.js', 'autocomplete_light/forward.js', 'autocomplete_light/select2.js']

[Daniel Hahler]

This is likely to e.g. the datetime widget requiring jquery.js, and then the merging of the deps causing jquery.js to come after dal (which does not explicitly require jquery).
See ​https://github.com/django/django/pull/9743 for more details and a possible fix (keeping admin media separate from the form).

[Tim Graham]

This particular issue was fixed in django-autocomplete-light:
​https://github.com/yourlabs/django-autocomplete-light/commit/35b0046686cd883cf83f66f3cf2b2d77af520047

If some change should be made to Django to address the general issue, I'm not sure what that is. The pull request linked in comment 1 has some discussion and ideas.