Hi guys,
I’ve been testing Ratings quite a bit in the last few days and seem to have implemented the Ajax of this module a bit differently than you guys suggest in the docs (which I haven’t done). Now I’m curious as to whether or not there are reprocussions. One of the things I saw in the docs is that there’s this “success/failure” template that is used in your implementation. Is this really necessary? What kinds of scenarios will cause a failure?
Anyway, I used prototype and the following example code if anyone else is curious:
<head>
<title>are you stylastic?</title>
</script>
//this function uses the Prototype ajax library to ajaxify the rating form. First it replaces the input 'rating' with the selected value, then serializes and submits the form.
function rateit(rating,formID)
{
$('rating').value = rating;
new Ajax.Updater('ratingtable', '/yum/', {onComplete:function(request, json){Element.hide('indicator')}, onLoading:function(request, json){Element.show('indicator')},parameters:Form.serialize(formID),method:'post',asynchronous:true}); return false;
}
</script>
<style>
/* styles for the star rater, the stars for the rating results are different and found in the themes folder on the server */
somestyles...
</style>
</head><body>
{exp:weblog:entries weblog="{my_weblog}" orderby="random" sort="desc" disable="trackbacks" limit="1" paginate="top"}
<!--using the entries tag here to bring up each entry, supposedly in random order when no entry is specified. I'd like to change this order to overall_ratings but don't want to mess with the extension required here. -->
<h2>header 2! where's 1?</h2>
<h3>{categories}<a href="{path={my_template_group}}">{category_name}</a>{/categories}</h3>
<div id="ratingDiv" style="float:right" width="300px">
<div id="ratingtable">
<span id="indicator" style="display: none"><img src="/images/ajax-loader.gif" alt="indicator icon" /></span>
<!--This is the ajax loader icon for the star ratings -->
{exp:rating:count entry_id="{entry_id}"}Number of ratings: {rating_count}{/exp:rating:count}
{exp:rating:form entry_id="{entry_id}" form_name="stylasticRatings" form_id="ratingform{entry_id}" require_membership="no" admin_template="admin_template" anonymous="yes" status="open" return="{path=test/rated/{entry_id}}"}
<input type="hidden" name="name" value="{screen_name}" />
<input type="hidden" name="email" value="{email}" />
<label for="review">Rating</label>
<!--here's the star rater. Things to do: change the href, change the stars to our own stars, change to use 7 stars instead of 5. Note that this form uses the template "rated" to return the overall average rating for the entry. This rating is specific to the form "stylasticRatings". -->
<ul class='star-rating'>
<li><a href='#' title='1 star out of 5' class='one-star' onclick="rateit(1,'ratingform{entry_id}')">1</a></li>
<li><a href='#' title='2 stars out of 5' class='two-stars' onclick="rateit(2,'ratingform{entry_id}')">2</a></li>
<li><a href='#' title='3 stars out of 5' class='three-stars' onclick="rateit(3,'ratingform{entry_id}')">3</a></li>
<li><a href='#' title='4 stars out of 5' class='four-stars' onclick="rateit(4,'ratingform{entry_id}')">4</a></li>
<li><a href='#' title='5 stars out of 5' class='five-stars' onclick="rateit(5,'ratingform{entry_id}')">5</a></li>
</ul>
<input type="hidden" id="rating" name="rating" value="3" />
</div>
{/exp:rating:form}
{exp:rating:count entry_id="{entry_id}"}Number of ratings: {rating_count}{/exp:rating:count}
<div id="reviewtable">
<!-- This is a quick and dirty review form. I was going to use normal commenting, but with the Rating module's review feature there's built in digg-style user moderation. It uses the template called "commented" with the entry_id to return a list of all reviews. This should probably be renamed "reviewed".-->
<span id="indicator2" style="display: none"><img src="/images/ajax-loader.gif" alt="indicator icon" /></span>
{exp:rating:form entry_id="{entry_id}" form_name="stylasticReviews" form_id="reviewform{entry_id}" require_membership="no" admin_template="admin_template" anonymous="yes" status="open" return="{path=test/commented/{entry_id}}"}
<input type="hidden" name="name" value="{screen_name}" />
<input type="hidden" name="email" value="{email}" />
<label for="review">Your Comments</label><br />
<textarea name="review" rows="10" cols="40"></textarea><br />
<input type="submit" value="Submit Comment" onclick="new Ajax.Updater('reviewtable', '/yum/', {onComplete:function(request, json){Element.hide('indicator2')}, onLoading:function(request, json){Element.show('indicator2')},parameters:Form.serialize(this.form),method:'post',asynchronous:true}); return false;" />
<!--Again, using the Prototype Form.serialize and Ajax.Updater to make Ajax life a lot easier-->
{/exp:rating:form}
</div>
</div>
<div id="photocell">
{related_entries id="pic"}
<div id="photo">
<img src="{image_url}" width="300px" border="0" alt="{title}" title="{title}" />
{/related_entries}
</div>
</div>
</div>
{/exp:weblog:entries}
