12

I need a widget, which should only display a block, because i will add functionality with jQuery. I am trying to include the javascript and stylesheet trough the "Media" class of Widget and it doesn't work for me.

Here is the code:

class StarsWidget(Widget):
    """
    Widget with stars for rating
    """
    class Media:
        js = (
                settings.MEDIA_URL + 'js/rating.js',
              )

        css = {
                'screen': (
                    settings.MEDIA_URL + 'css/rating.css',
                    )
              }


    def render(self, name, value, attrs=None):
        if value is None: value = ''

        attrs = {'id':'ratingX', 'class':'rating'}
        final_attrs = self.build_attrs(attrs, name=name)
        if value != '':
            # Only add the 'value' attribute if a value is non-empty.
            final_attrs['value'] = force_unicode(value)
        return mark_safe(u'<div %s ></div>' % flatatt(final_attrs))

Any suggestions or help will be appreciated

Xidobix
  • 2,538
  • 3
  • 17
  • 10
  • Check the generated (X)HTML for where your browser is looking for your JS/CSS. Is it where you expect? Does it load at that location if you try to load it directly? – Dominic Rodger Oct 13 '09 at 08:26

3 Answers3

48

Are you actually including the form media in your template anywhere?

{% block extrahead %}
  {{ form.media }}
{% endblock %}
Daniel Roseman
  • 588,541
  • 66
  • 880
  • 895
  • 10
    It was not very clear in the docs. It seemed to be automatic : "Every time the CalendarWidget is used on a form, that form will be directed to include the CSS file pretty.css, and the JavaScript files animations.js and actions.js" https://docs.djangoproject.com/en/1.11/topics/forms/media/#assets-as-a-static-definition – ThePhi Aug 30 '17 at 12:37
  • It makes sense, in a way (although the docs are not clear about it): explicitely calling `{{ form.media }}` allows you to add script and stylesheets outside of the body html, which is good practice. – Régis B. Oct 19 '18 at 09:48
  • Saved my day! Was not very clear [in the official doc](https://docs.djangoproject.com/en/2.2/topics/forms/media/#topics-forms-media), while they do specify the `.media` will generate the html tags. – Shawn Apr 30 '19 at 18:12
4

Paths in "class Media" are automatically prepended with settings.MEDIA_URL. So try like this:

class Media:
    js = ('js/rating.js',)
    css = {'screen': ('css/rating.css',),}

If it will not work, I suggest using FireBug or something like it and checking if browser is able to load css and javascript.

Based on comment: It appears, that you are not loading your form media at all. Try adding in the template:

{{ my_form.media }}

in {% block subheader %} (or wherever you are loading scripts and css), where "my_form" is the name of your form instance, created in the view.

Daniel Hernik
  • 321
  • 1
  • 3
  • thx for the answer, but the MEDIA_URL is not the problem. When i debug it in the python console i get the correct output back, i mean >>> widget.media I think i need a special templatetag which should load all the media of the forms without repeat them. – Xidobix Oct 13 '09 at 07:18
0

Minor optimization: You don't need to prepend settings.MEDIA_URL to your paths, it's done automatically when it's printed out.

Emil Stenström
  • 13,329
  • 8
  • 53
  • 75