I’m trying to be clever with JS and jQuery, and using a 3PP called ‘Raty’, which simply puts stars into a div, useful when you want to show what rating an item has been given.
Now, here is the javascript I use to dynamically assign values:
$(document).ready(function() {
for (var i = 1; i <=5; i++) {
var starting = parseInt($('#toplistRating'+i+'val').val());
$('#toplistRating'+i).raty({
number: 3,
half: true,
readOnly: true,
start: starting,
hintList: ['could be improved', 'alright', 'AWESOME']
});
}
});
And there is a list of items I get from the DB. Here are all 5 (note they are essentially the same, bar some ids being different by 1):
<div id="toplist" class="std-column">
<p class="toplist-links">switch to top: <a href="index?toplistSelected=1">1</a> | <a href="index?toplistSelected=2">2</a>
<a href="index?toplistSelected=3">3</a> | <a href="index?toplistSelected=4">4</a></p>
<div class="toplist-item">
<a href="viewpic?id=35">
<p class="toplist-num">1.</p>
<img src="image?id=35&thumbnail=1" class="toplist-pic">
<div class="toplist-info">
<div id="toplistRating1" style="cursor: default;" title="AWESOME"><img class="toplistRating1" title="AWESOME" alt="1" src="images/star-on.png" id="toplistRating1-1"> <img class="toplistRating1" title="AWESOME" alt="2" src="images/star-on.png" id="toplistRating1-2"> <img class="toplistRating1" title="AWESOME" alt="3" src="images/star-on.png" id="toplistRating1-3"><input type="hidden" id="toplistRating1-score" name="score" value="3"></div>
<input type="hidden" value="6" id="toplistRating1val">
<p class="toplist-text"><span class="soft">1 ratings</span></p>
</div>
</a>
</div>
<div class="toplist-item">
<a href="viewpic?id=7">
<p class="toplist-num">2.</p>
<img src="image?id=7&thumbnail=1" class="toplist-pic">
<div class="toplist-info">
<div id="toplistRating2" style="cursor: default;" title="AWESOME"><img class="toplistRating2" title="AWESOME" alt="1" src="images/star-on.png" id="toplistRating2-1"> <img class="toplistRating2" title="AWESOME" alt="2" src="images/star-on.png" id="toplistRating2-2"> <img class="toplistRating2" title="AWESOME" alt="3" src="images/star-on.png" id="toplistRating2-3"><input type="hidden" id="toplistRating2-score" name="score" value="3"></div>
<input type="hidden" value="5" id="toplistRating2val">
<p class="toplist-text"><span class="soft">3 ratings</span></p>
</div>
</a>
</div>
<div class="toplist-item">
<a href="viewpic?id=11">
<p class="toplist-num">3.</p>
<img src="image?id=11&thumbnail=1" class="toplist-pic">
<div class="toplist-info">
<div id="toplistRating3" style="cursor: default;" title="AWESOME"><img class="toplistRating3" title="AWESOME" alt="1" src="images/star-on.png" id="toplistRating3-1"> <img class="toplistRating3" title="AWESOME" alt="2" src="images/star-on.png" id="toplistRating3-2"> <img class="toplistRating3" title="AWESOME" alt="3" src="images/star-on.png" id="toplistRating3-3"><input type="hidden" id="toplistRating3-score" name="score" value="3"></div>
<input type="hidden" value="5" id="toplistRating3val">
<p class="toplist-text"><span class="soft">5 ratings</span></p>
</div>
</a>
</div>
<div class="toplist-item">
<a href="viewpic?id=8">
<p class="toplist-num">4.</p>
<img src="image?id=8&thumbnail=1" class="toplist-pic">
<div class="toplist-info">
<div id="toplistRating4" style="cursor: default;" title="AWESOME"><img class="toplistRating4" title="AWESOME" alt="1" src="images/star-on.png" id="toplistRating4-1"> <img class="toplistRating4" title="AWESOME" alt="2" src="images/star-on.png" id="toplistRating4-2"> <img class="toplistRating4" title="AWESOME" alt="3" src="images/star-on.png" id="toplistRating4-3"><input type="hidden" id="toplistRating4-score" name="score" value="3"></div>
<input type="hidden" value="4" id="toplistRating4val">
<p class="toplist-text"><span class="soft">5 ratings</span></p>
</div>
</a>
</div>
<div class="toplist-item">
<a href="viewpic?id=12">
<p class="toplist-num">5.</p>
<img src="image?id=12&thumbnail=1" class="toplist-pic">
<div class="toplist-info">
<div id="toplistRating5" style="cursor: default;" title="AWESOME"><img class="toplistRating5" title="AWESOME" alt="1" src="images/star-on.png" id="toplistRating5-1"> <img class="toplistRating5" title="AWESOME" alt="2" src="images/star-on.png" id="toplistRating5-2"> <img class="toplistRating5" title="AWESOME" alt="3" src="images/star-on.png" id="toplistRating5-3"><input type="hidden" id="toplistRating5-score" name="score" value="3"></div>
<input type="hidden" value="4" id="toplistRating5val">
<p class="toplist-text"><span class="soft">5 ratings</span></p>
</div>
</a>
</div>
</div>
Raty – http://www.wbotelhos.com/raty/ – only shows 3 Stars (out of 3) for every item, when I know that the scores are lower, like 2 stars for the last 2.
Please help me. I suspect my problem lies with suspect use of javascript, especially that for-loop. If you need more info just let me know and I’ll modify the question.
The value of starting comes from the hidden input field in the div. From the sample html, these values are all greater than 3.
6, 5, 5, 4 for the four items mentioned.
These will max out at 3 since that is the star range.
Change the values of the hidden input fields to <=3 and you should see different star images.
If you want to include half stars, then try parseFloat rather than parseInt then / 2.0 afterwards.