Adding multiple star rating widgets to one page
- by diglettpotato
I am using this jQuery plugin for star ratings:
http://orkans-tmp.22web.net/star_rating/
Everything is going great, including using AJAX, etc. The problem is that I need to have many per page and can't quite figure out how to work with the selectors to achieve this. I think this is probably very easy for someone who knows their jQuery...
Here's some code below... There are multiple kids per page, and I need one rating widget for each kid.
I can set up each #rat to be unique with a kid attached to it, like #1rat, #2rat, etc. But then how would I set up the function to be run on each of them independently?
<script type="text/javascript">
$(function(){
var kidval=1; //this needs to be setup for each kid... not just 1
var uidval=1;
$('#rat').children().not("select, #rating_title").hide();
var $caption = $('<div id="caption"/>');
$('#rat').stars({
inputType: "select",
oneVoteOnly: false,
callback: function(ui, type, value) {
$("#"+kidval+"messages").text("Saving...").fadeIn(30);
$.post("vote.php", {rate: value, kid: kidval, uid: uidval}, function(json) {
$("#"+kidval+"messages").text("Average");
ui.select(Math.round(json.avg));
$caption.text(" (" + json.votes + " votes, " + json.avg + " avg)");
$("#"+kidval+"messages").text("Rated " + value + " Thanks!").stop().css("opacity", 1).fadeIn(30);
setTimeout(function(){
$("#"+kidval+"messages").fadeOut(1000)
}, 2000);
}, "json");
}
});
$('#rat').stars("selectID", -1);
$caption.appendTo(#rat);
$('<div id="'+kidval+'messages"/>').appendTo(#rat);
});
