[Django] #29264: JS loading order in Admin-Change_form changes from model to model

[Django]

#29264: JS loading order in Admin-Change_form changes from model to model
-------------------------------------------+------------------------
Reporter: yarharel | Owner: nobody
Type: Bug | Status: new
Component: Template system | Version: 2.0
Severity: Normal | Keywords:
Triage Stage: Unreviewed | Has patch: 0
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 0 |
-------------------------------------------+------------------------
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']
}}}

--
Ticket URL: <https://code.djangoproject.com/ticket/29264>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#29264: JS loading order in Admin-Change_form changes from model to model

---------------------------------+--------------------------------------
Reporter: Yaron Harel | Owner: nobody

Type: Bug | Status: new
Component: Template system | Version: 2.0

Severity: Normal | Resolution:

Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0

---------------------------------+--------------------------------------

Comment (by 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).

--
Ticket URL: <https://code.djangoproject.com/ticket/29264#comment:1>

[Django]

#29264: JS loading order in Admin-Change_form changes from model to model

---------------------------------+--------------------------------------
Reporter: Yaron Harel | Owner: nobody
Type: Bug | Status: closed

Component: Template system | Version: 2.0

Severity: Normal | Resolution: needsinfo

Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0

---------------------------------+--------------------------------------
Changes (by Tim Graham):

* status: new => closed
* resolution: => needsinfo

Comment:

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.

--
Ticket URL: <https://code.djangoproject.com/ticket/29264#comment:2>