Question

We are using a jquery star rating script which is what we want exactly. We are trying to create a feature to work along side with it but it isn’t working due to the radio buttons being replaced?

This is what we have:

This is what we want to achieve:

Basically, what we are trying to do is create a feature that updates a percentage depending on what they chose, a “score” type of thing. It works perfectly if we take the rating script out – as it just runs straight from the radio buttons – but when we use the rating script, the radio buttons get replaced by just DIVs. When inspecting with firebug, we see the following:

<div class="ui-stars-star">
    <a title="">Average</a>
</div>

Which in pure HTML, is infact:

<label for="vote-19_5" class="blockLabel"><input type="radio" name="poll-19" id="vote-19_5" value="Average" /> Average</label>

Here is our code:

An example rating:

<div class="ctrlHolder">
    <p class="label">Clean Green and Environmentally Friendly</p>
    <div class="multiField starify" id="question-19">
        <label for="vote-19_1" class="blockLabel"><input type="radio" name="poll-19" id="vote-19_1" value="Very Poor" /> Very Poor</label>
        <label for="vote-19_2" class="blockLabel"><input type="radio" name="poll-19" id="vote-19_2" value="Poor" /> Poor</label>
        <label for="vote-19_3" class="blockLabel"><input type="radio" name="poll-19" id="vote-19_3" value="Not that Bad" /> Not that Bad</label>
        <label for="vote-19_4" class="blockLabel"><input type="radio" name="poll-19" id="vote-19_4" value="Fair" /> Fair</label>
        <label for="vote-19_5" class="blockLabel"><input type="radio" name="poll-19" id="vote-19_5" value="Average" /> Average</label>
        <label for="vote-19_6" class="blockLabel"><input type="radio" name="poll-19" id="vote-19_6" value="Almost" /> Almost</label>
        <label for="vote-19_7" class="blockLabel"><input type="radio" name="poll-19" id="vote-19_7" value="Good" /> Good</label>
        <label for="vote-19_8" class="blockLabel"><input type="radio" name="poll-19" id="vote-19_8" value="Very Good" /> Very Good</label>
        <label for="vote-19_9" class="blockLabel"><input type="radio" name="poll-19" id="vote-19_9" value="Excellent" /> Excellent</label>
        <label for="vote-19_10" class="blockLabel"><input type="radio" name="poll-19" id="vote-19_10" value="Perfect" /> Perfect</label>
    </div>
</div>

Here is where we want our feature to go:

Score: <div id="rating"></div>

Here is our JS to create the feature:

$('.starify :radio').live('click', function(){
var rating=0;
$('.starify :checked').each(function(){
rating += ($(this).parent().index()+1) * 0.5;
});

$('#rating').text(rating + ' %');
});

We just want to get our rating score % feature compatible with the star rating script, as the star rating script replaces the radio buttons with HTML and it causes the score % JS not to work. If we take out the star rating script, it works perfectly. (I can upload a demo of that too if needed).

We don’t even mind setting in our javascript variables, to define each word as a numeric value.

Demo: http://sitehelp.com.au/demos/starrating/demo7c.html

Any help would be greatly appreciated.

Answer 1

how about something like this?…

$('.ui-stars-star').live('click', function(){
var rating=0;
$(this).parent().find(".ui-stars-star-on").each (function ()
{
  rating += ($(this).parent().index()+1) * 0.5;
});
alert(rating);

});

we can even make it better by removing the loop:

$('.ui-stars-star').live('click', function(){
   var rating=0;

   rating = $(this).parent().find(".ui-stars-star-on").length * ($(this).parent().index()+1) * 0.5;

   alert(rating);

});