Question

Hello I’m using this star rating widget http://www.fyneworks.com/jquery/star-rating/ to add functionality for users to vote on specific subject.

Sending votes uses jQuery’s ajax functions to send a call to the server side. The stars are generated from the client side by the widget, but I retrieve the average score and total voters from the server side.

My question is how should I go to implement so that some stars are marked upon load for a subject that persons have voted on.

The widget itself provides it by simply using the checked=checked attribute. I tried by so far using jQuery to add this attribute before page load. It did added the attribute, but the widget itself was still executed first thus the checked wasn’t applied.

I find that I maybe have to generate the radio buttons from server side, which will turn into an ugly solution. So I wonder how should it be done?

$(window).load(function(){
    $("[value=3]").attr("checked","checked");
}); 
$(function() {
    $('.auto-submit-star').rating({ 
        callback: function(value){ 
            //alert(value);
            $.post("/process_vote/", {u_id: u_id, rating: value, m_id: hit_id, csrfmiddlewaretoken: csrf_token}, 
                function(data) {
                    alert(data);
                });
        }
    }); 
});

Answer 1

Change:

$(window).load(function(){
    $("[value=3]").attr("checked","checked");
}); 
$(function() {
    $('.auto-submit-star').rating({ 

With:

$(function() {
    $("[value=3]").attr("checked","checked");
    $('.auto-submit-star').rating({ 

This will ensure the linearity of the process.