9.10.2008
by PerS
2 Comments
I’ve written an ajax rating snippet, you’ll find a demo at http://apps.new.facebook.com/ajaxrating/
It is based on Paul OB’s CSS Star Matrix Pre-loaded
The source code below, should be self explanatory, but if you need input on how to do fbjs ajax, you’ll find documentation and examples over at the facebook development site
< ?php
// the $callbackroot MUST point to your server, if you point it to your app.new.facebook.com/APPLICATION, ajax will fail.
$callbackroot='http://[PLACE_YOUR_CALLBACK_URL_HERE]'; // do not add a trailing slash e.g.: http://myserver.domain.com
//AJAX Response (should be first php or in a separate php file):
if (isset($_REQUEST['rate'])) {
//do something and return "ok" if things are fine
echo "ok";
exit; //Important! Stops remaining php after AJAX request is processed
}
//what ever apicall you use to authenticate, this one is from smiley: http://svn.facebook.com/svnroot/platform/samples/packages/smiley.tar.gz
$fb = get_fb();
$user = $fb->require_login();
?>
<!-- see rate.css below -->
<link rel="stylesheet" type="text/css" href="<?=$callbackroot?>/rate.css" />
<script type="text/javascript">
function save_rating(rate) {
// array with the class names, used when you add the new class
var ratings = [ "nostar", "onestar", "twostar", "threestar", "fourstar", "fivestar" ];
var ajax = new Ajax();
ajax.responseType = Ajax.RAW;
ajax.ondone = function(data) {
if (data == "ok") {
// remove old class names (I don't know which one, so I remove all of them), and add the new
document.getElementById('rating_1').removeClassName('nostar').removeClassName('onestar').removeClassName('twostar').removeClassName('threestar').removeClassName('fourstar').removeClassName('fivestar').addClassName(ratings[rate]);
} else {
new Dialog().showMessage('Dialog', 'set rating failed');
}
}
ajax.onerror = function() {
new Dialog().showMessage('Dialog', 'set rating failed');
};
ajax.requireLogin = 1;
var params={"rate":rate };
ajax.post('< ?=$callbackroot?>/rate.php',params);
}
</script>
<ul id="rating_1" class="rating nostar">
<li class="one"><a href="#" title="1" onclick="save_rating(1); return false;">1</a></li>
<li class="two"><a href="#" title="2" onclick="save_rating(2); return false;">2</a></li>
<li class="three"><a href="#" title="3" onclick="save_rating(3); return false;">3</a></li>
<li class="four"><a href="#" title="4" onclick="save_rating(4); return false;">4</a></li>
<li class="five"><a href="#" title="5" onclick="save_rating(5); return false;">5</a></li>
</ul>
A how-to and the rate.css are located at http://forum.developers.facebook.com/viewtopic.php?id=22547
