I was perusing my twitter now about 12 hours after the release of HipHop from Facebook and I see the techcrunch headline:
“Live From Facebook’s HipHop Technology Tasting by @“
and I wonder, what do Facebook engineers have to offer hip hop? Better yet, why is Facebook entering the music industry?
As it turns out, Facebook’s HipHop Technology is not the new dawn of auto tune, but a PHP to C++ compiler I had heard about a month or so ago. The project is now finished and Facebook is claiming a code speedup of about 50%. At first I thought the whole thing was just wishful thinking and would be a few years out. Turns out it was only two years out (guess I live under a rock) and those two years were up this morning.
This post will teach you to add star ratings anywhere on your website with jquery that auto submit a form when clicked and become disabled after a click has fired. You must provide the backend (php with a SQL database or other) to get it working correctly.
First get a copy of the star ratings plugin found here and be sure that you have jquery included in your html.
The site contains some useful information for setting up the ratings but I found it a headache to get ajax auto submit and to disable the stars. Hence this post! Let’s get into it.
Once you’re sure that all the necessary javascript is getting included correctly, display the stars in the following fashion. Note: I use the dummy variables $rating, $uniqid, and $total_votes to indicate some database, pre-determined variables you have set for this particular star rating. The unique id allows you to use multiple star ratings on one page and could be generated by an enclosing content-producing for loop. To begin, set these manually, leaving a comment that it is a stub to fill in later.
<?php
/* STUB: Fill in with database */
$rating = 3;
$uniqid = 1;
$total_votes = 20;
for($i = 1; $i <= 5; $i++) {
if((int)round($rating, 0) == $i) $checked = "checked";
else $checked = "";
?>
<input type="radio" class="auto-submit-star" name="rating_<?php echo $uniqid; ?>" value="<?php echo $i; ?>" <?php echo $checked; ?> />
<span class="ratingVotes" id="ratingVotes<?php echo $uniqid; ?>">(<?php echo $total_votes; ?>)</span>
<?php } ?>
Nice. With this code, the stars will display on page load, but will not yet be good for anything. We need to hook them up to some jquery magic to get submissions via ajax:
<form name="rating_form_<?php echo $uniqid; ?>" action="rating.php">
<?php
/* STUB: Fill in with database */
$rating = 3;
$uniqid = 1;
$total_votes = 20;
?>
<script type="text/javascript">
$(function() {
$('input[name=rating_<?php echo $uniqid; ?>]').rating({
callback: function(value, link) {
if(!value) return;
var serializedForm = $(this.form).serialize();
$.post(
"rating.php",
serializedForm,
function(data) {
/* ratingVotes displays the total number of votes so far */
$('#ratingVotes<?php echo $uniqid; ?>').html("("+data+")");
});
/* keeps the stars from being clicked again */
$('input[name=rating_<?php echo $uniqid; ?>]').rating('disable');
}
});
});
</script>
<?php
for($i = 1; $i <= 5; $i++) {
if((int)round($rating, 0) == $i) $checked = "checked";
else $checked = "";
?>
<input type="radio" class="auto-submit-star" name="rating_<?php echo $uniqid; ?>" value="<?php echo $i; ?>" <?php echo $checked; ?> />
<span class="ratingVotes" id="ratingVotes<?php echo $uniqid; ?>">(<?php echo $total_votes; ?>)</span>
<?php
}
?>
</form>
Excellent, here we use the rating method to call a javascript function when a user clicks the star. The callback posts to rating.php, a script we have written to update ratings for each item in the database. In this example, the user’s vote comes through in the post variable $_POST['rating_uniqid'] and will be an integer value between 1 and 5. We can use this value to update the vote count / average in the database and then echo back the number of votes so far. We then update the ratingVotes span to indicate the total number of votes so far. Getting the updated number of votes in this way allows us to easily check if a user has voted and not increment the count if he or she has, simply printing back the original number of votes.
That’s it!
