Question

I have the following jQuery script running on my page:

<script type="text/javascript" charset="utf-8" src="{{ STATIC_URL }}js/raty/js/jquery.raty.min.js"></script>
<script type ="text/javascript"> 
jQuery(document).ready(function($) {
         $('.yourrating').each(function(index){
          $(this).raty({
            readOnly:  false,
            path: "{{ STATIC_URL }}js/raty/img/",
score: $(this).children("span:first").text(),
            click: function(score, evt) {
                var vote_url = "/spice/rate/" + this.attr('id').substring(2) + "/" + score + "/";
                $.ajax({
                  url: vote_url,
                  success: function(){
                  alert('vote successful');
                  }
                });
            }
          });
        $('.thingrating').raty({
          readOnly:  true,
          start:     2,
         path: "{{ STATIC_URL }}js/raty/img/",
score: $(this).children("span:first").text(),
        });
        });
    });
  </script>

Right now, when the user clicks it’s not recognizing the action and showing the pop-up, which tells me the variables are not being subbed in correctly. To confirm this, I changed var vote_url to a direct path "spice/rate/1/2" and this indeed worked properly.

This leads to two questions:

1. How can I debug it to see which URL is being used (ie. the variables being subbed in?)
2. How can I correct this problem?

Here is the relevant snipped of code from the template:

<div class="yourrating" id="t_{{ item.id }}"><span style="display:none;">{{score}}</span></div>

Answer 1

Why don’t I clean that up a bit for you, and give you an answer to accept!

<script type ="text/javascript"> 
(function($) {
    $(function() {
        $('.yourrating').each(function(index,elem){
            $(elem).raty({
                readOnly:  false,
                path: "{{ STATIC_URL }}js/raty/img/",
                score: $(elem).children("span:first").text(),
                click: function(score, evt) {
                    var vote_url = "/spice/rate/" + this.id.substring(2) + "/" + score + "/";
                    $.ajax({
                        url: vote_url,
                        success: function(){
                            alert('vote successful');
                        }
                    });
                }
            });
            $('.thingrating').raty({
                readOnly: true,
                start: 2,
                path: "{{ STATIC_URL }}js/raty/img/",
                score: $(elem).children("span:first").text(),
            });
        });
    });
})(jQuery);
</script>​​​​​​​​​​​​​​