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

Question

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.

Micah Carrick · Accepted Answer · 2012-10-07T20:48:36.877

6

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.

edited Oct 07 '12 at 20:48

answered Oct 07 '12 at 20:19

Micah Carrick

9,967
3
31
43

Thanks Micah for your response. I just have tried this without luck. Are you sure {{ STATIC_URL }} which gets translated perfectly into the proper url within the base.html, is also accepted within `myApp.js` ? I am not certain, since the Django framework needs to convert this and I am not sure if this is possible within the javascript. – Houman Oct 07 '12 at 20:32
Oh, I thought that JS was directly in your template. No, that's not going to work in myApp.js (as I assume that's served as static content). You can try hard-coding it in there just to see if that is indeed the issue. I often have a JS section in the head of my Django template (eg base.html) that defines globals or namespaced VARs for paths so as to avoid absolute URLs hard-coded in the JS. – Micah Carrick Oct 07 '12 at 20:35
Ah that sounds reasonable. Could you please give me an example of how you use a global namespace VAR, so that I can access it later in my `myApp.js`? thanks – Houman Oct 07 '12 at 20:43
Edited my answer with an example. – Micah Carrick Oct 07 '12 at 20:49

score 1 · Answer 2 · answered Sep 17 '13 at 15:54

The most simple way is to set the path globally in case you gonna use multiple ratings so you don't need to repeat everywhere.

<script type="text/javascript" src="{{ STATIC_URL }}raty/jquery.raty.min.js"></script>
<script type="text/javascript">
    $.fn.raty.defaults.path = '{{ STATIC_URL }}raty/img';
</script>

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

2 Answers2