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

[tblanchard@…]

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/admin/RelatedObjectLookups.js',
                '/media/js/getElementsBySelector.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="http://openlayers.org/api/2.8/OpenLayers.js"></script>
<script type="text/javascript" src="/static/olwidget/js/olwidget.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAWGazslnMSgtzbIMfXLHIgBS5ci6sQZUkD9hfwKAiXgiJK2N7uxTWbLDcob2apHjRnK6OlA7hReqQaA"></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

[Alex Gaynor]

Please use preview.

[Alex Robbins]

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.
​http://stackoverflow.com/questions/38601/using-django-time-date-widgets-in-custom-form/719583#719583

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.

Solutions:

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. ​http://docs.djangoproject.com/en/dev/topics/forms/media/#s-form-media

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

[Aymeric Augustin]

Change UI/UX from NULL to False.

[Aymeric Augustin]

Change Easy pickings from NULL to False.

[Tim Graham]

See #21318 for a ticket requesting documentation about this.

[Collin Anderson]

I believe this is fixed by #28377