Opened 6 years ago

Last modified 8 months ago

#12265 new Bug

Media (js/css) collection strategy in Forms has no order dependence concept

Reported by: tblanchard@… Owned by: nobody
Component: Forms Version: 1.1
Severity: Normal Keywords:
Cc: Triage Stage: Accepted
Has patch: no Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: no

Description (last modified by Alex)

And thus is broken. I have a form with a bunch of fields in it and when collecting the js files to include it mixes up the order and thus core.js ends up loaded later than files that require addEvent and the js load fails. At the end of the day, this mechanism is just half baked and would be better removed entirely so busy developers can just get stuff done and not waste time with it.

For example:

class NewIncidentForm(forms.ModelForm):
    place = forms.CharField(widget=EditableMap(options={
        'layers': ['google.hybrid', 'google.streets', 'google.physical', 'google.satellite',  ],
        'default_lat': 39.4421,
        'default_lon': -100.0,
        'default_zoom': 7,
        'geometry': 'point',
    when_occurred = forms.DateTimeField(widget=widgets.AdminSplitDateTime())
    when_reported = forms.DateTimeField(widget=widgets.AdminSplitDateTime())
    class Meta:
        model = Incident
    class Media:
        js = (  '/media/js/core.js',
                '/media/js/actions.js', )

class Incident(models.Model):

    title = models.CharField(max_length=128)
    when_occurred = models.DateTimeField()
    when_reported = models.DateTimeField()
    reporter = models.ForeignKey(User)
    place = models.PointField()
    notes = models.TextField(max_length=4000)
    what_type = models.ForeignKey(IncidentType)
    # allow spatial querying
    objects = models.GeoManager()

results in this:

       <link href="/static/olwidget/css/olwidget.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="/media/js/calendar.js"></script>
<script type="text/javascript" src="/media/js/admin/DateTimeShortcuts.js"></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="/static/olwidget/js/olwidget.js"></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="/media/js/core.js"></script>
<script type="text/javascript" src="/media/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="/media/js/getElementsBySelector.js"></script>
<script type="text/javascript" src="/media/js/actions.js"></script>

which fails because DateTimeShortcuts requires addEvent which is defined in core.js

Change History (7)

comment:1 Changed 6 years ago by Alex

  • Description modified (diff)
  • Needs documentation unset
  • Needs tests unset
  • Patch needs improvement unset

Please use preview.

comment:2 Changed 6 years ago by russellm

  • Triage Stage changed from Unreviewed to Accepted

comment:3 Changed 5 years ago by alexr

I think this is a combination of issues.

1) The user wants to use a django admin widget outside of the admin. Since the widgets don't include all of the media that they need, he is needing to add some extra js and css to the media definition.

2) Adding the js and css to the form media class isn't working because the media from the fields is added before the media from the form.

The solution is to add the js and css to the template before the form, but that is really a hack to work around the fact that he can't define media in his class to do what he needs. He could also subclass the admin widgets and add the required media to the fields.


1) Make the admin widgets contain all the media they need within their own media definition.

2) Change the admonition on this page to give a better explanation of some of the pitfalls of using admin widgets.

3) Document the order that media is combined. (Fields, in field order, then form media added.)

comment:4 Changed 5 years ago by julien

  • Severity set to Normal
  • Type set to Bug

comment:5 Changed 4 years ago by aaugustin

  • UI/UX unset

Change UI/UX from NULL to False.

comment:6 Changed 4 years ago by aaugustin

  • Easy pickings unset

Change Easy pickings from NULL to False.

comment:7 Changed 8 months ago by timgraham

See #21318 for a ticket requesting documentation about this.

Note: See TracTickets for help on using tickets.
Back to Top