Search code examples
djangoraty

Django: How to setup the static settings for jQuery-Raty?

I am trying to get jquery.raty working with Django. I have the serving of static-files perfectly setup, however it seems it has a problem finding the rating image files after all.

This is how I have set it up:

base.html (static loads here fine)

<script src="{{ STATIC_URL }}raty/js/jquery.raty.min.js"></script>

template:

<div id="star"></div>

js

$('#star').raty({
      cancel    : true,
      cancelOff : 'cancel-off-big.png',
      cancelOn  : 'cancel-on-big.png',
      half      : true,
      size      : 24,
      starHalf  : 'star-half-big.png',
      starOff   : 'star-off-big.png',
      starOn    : 'star-on-big.png'
    });

but instead of stars I see alternate text numbers:

enter image description here

And this is the message I get from server when refreshing the page:

[07/Oct/2012 21:03:48] "GET /contact/add/img/star-off-big.png HTTP/1.1" 200 9941

I don't understand why it looks at current location (http://127.0.0.1:8000/contact/add/) and appends /img/xxx.png to the /contact/add/.

How do I set the path to the images in the javascript using a STATIC_URL path?

Would really appreciate your help on this.

Solution

  • The default path of Raty is "img". Try passing path as an absolute URL:

    $('#star').raty({
    cancel    : true,
    cancelOff : 'cancel-off-big.png',
    cancelOn  : 'cancel-on-big.png',
    half      : true,
    size      : 24,
    starHalf  : '../raty/img/star-half-big.png',
    starOff   : 'star-off-big.png',
    starOn    : 'star-on-big.png',
    path      : '{{ STATIC_URL }}img' // <-- or wherever your raty images are
});

    Edit:

    One way using jQuery "namespaced" variables for using STATIC_URL in other external javascript files. This would be defined in the <head> of your template, after including jQuery but before any scripts which used the defined variable.

    <script type="text/javascript">  
    $.myproject = {} // namespace
    $.myproject.STATIC_URL = '{{ STATIC_URL }}';
</script>

    Then your other scripts can use $.myproject.STATIC_URL when the absolute URL to the static assets is needed.