I want to submit a rating through onclick event on the stars and also want to update the star view after getting response via ajax submit.
But, the code that draws the stars is just {stars_avg_count}. Could you advise where I need to exactly modify the code to make {stars_avg_count} interactive for onclick submission?

Have you seen this thread? By specifying the template paramter you can load an “AJAXified” template, containing the count. You will also need a few lines of Javascript to submit the form onclick.

You will not need to modify the module code as such.

Yes, I have seen that. But, the thread does not answer my question. I dont want to show a drop-down and star avg [{stars_avg_count}.] both rather want to merge them together. Trough dropdown, I can now submit the rating AJAX-way. But, its the star[{stars_avg_count}.] that I want to make interactive. Any code segment or sample code would be great.
Could you help?

Sorry, I don’t follow. Perhaps you could show us a real life example of what you had in mind.

This is my code segment:
————————————————————————————
{exp:rating:stats entry_id=“{entry_id}“ theme=“default”}
  <div id=“rating”>{stars_overall_avg}</div>
  Based on {overall_count} review{if overall_count != “1”}s{/if}
  {/exp:rating:stats}

{exp:rating:form entry_id=“{entry_id}“ form_name=“review”  form_id =“review-{entry_id}“
  class=“review-form” anonymous=“yes” status=“open” allow_duplicates=“yes” template=“site/rating_ajax_return”}

<input type=“hidden” name=“name” value=“{screen_name}“ />
<input type=“hidden” name=“entry_url_title” value=“{url_title}“ />
<label for=“review”>Your Rating</label>
<select name=“rating”>
<option value=“1” >1</option>
<option value=“2” >2</option>
<option value=“3” >3</option>
<option value=“4” >4</option>
<option value=“5”>5</option>
</select>
<input type=“Submit” name=“Submit” value=“Submit”>

{/exp:rating:form}
—————————————————————————

As you see, the stars are coming from {stars_overall_avg}, how can I modify that to onclick submission, instead of submitting the rating through the dropdown?

What I meant was, could you show us an example of a website like this out there on the internet? A site where the rating is working like you’d want it to? Also, a link to your site so we can see what you’ve got so far would be helpful.

Most of the rating on the internet are like that. Please look at youtube or metacafe rating.

So, basically you want the stars to act as input field, so people would simply click on the appropriate number of stars? Well, in theory that should be possible. You would probably need to nest {exp:rating:stats} and {exp:rating:form} for that to work, and a bit of Javascript / AJAX to tie it all together. I am afraid this would go a little beyond the scope of these forums, though.

if I understand correctly, this is what’s requested: http://myphonewidgets.com/WordPress/2007/06/21/updated-gcalc-gcalc2/

at least, that’s what I’d like to add to my site (roll over the stars just below the entry to enter your ratings vote. see how it reloads in place and doesn’t allow you to vote again).

possible?

pirco, you seem to have got it working? Looks nice. Would you mind sharing a few lines of code?

well, it doesn’t feel like a beautiful solution but this is what I have on http://iphonewidgetlist.com/index.php/iPhone/

{exp:rating:form entry_id=“{entry_id}“ form_name=“widget_rating” required=“” require_membership=“no” notify=“admin@mydomain.com” admin_template=“admin_template” anonymous=“yes” status=“open” return=“{path={segment_1}/{segment_2}/{segment_3}/}“}
<input type=“hidden” name=“email” value=“test@test.com” /><input type=“hidden” name=“name” value=“anonymous” /><input type=“hidden” name=“rating” value=“1” />
<td>
<input type=“image” src=“/themes/rating_themes/default/images/star-0.gif” name=“rating” id=“rating1” value=“1” onmouseover=“this.src=‘/themes/rating_themes/default/images/star-100.gif’” onmouseout=“this.src=‘/themes/rating_themes/default/images/star-0.gif’” /></td>
{/exp:rating:form}

{exp:rating:form entry_id=“{entry_id}“ form_name=“widget_rating” required=“” require_membership=“no” notify=“admin@mydomain.com” admin_template=“admin_template” anonymous=“yes” status=“open” return=“{path={segment_1}/{segment_2}/{segment_3}/}“}
<input type=“hidden” name=“email” value=“test@test.com” /><input type=“hidden” name=“name” value=“anonymous” /><input type=“hidden” name=“rating” value=“2” />
<td>
<input type=“image” src=“/themes/rating_themes/default/images/star-0.gif” name=“rating” id=“rating2” value=“2” onmouseover=“this.src=‘/themes/rating_themes/default/images/star-100.gif’” onmouseout=“this.src=‘/themes/rating_themes/default/images/star-0.gif’” /></td>
{/exp:rating:form}

{exp:rating:form entry_id=“{entry_id}“ form_name=“widget_rating” required=“” require_membership=“no” notify=“admin@mydomain.com” admin_template=“admin_template” anonymous=“yes” status=“open” return=“{path={segment_1}/{segment_2}/{segment_3}/}“}
<input type=“hidden” name=“email” value=“test@test.com” /><input type=“hidden” name=“name” value=“anonymous” /><input type=“hidden” name=“rating” value=“3” />
<td>
<input type=“image” src=“/themes/rating_themes/default/images/star-0.gif” name=“rating” id=“rating3” value=“3”  onmouseover=“this.src=‘/themes/rating_themes/default/images/star-100.gif’” onmouseout=“this.src=‘/themes/rating_themes/default/images/star-0.gif’” /></td>
{/exp:rating:form}

{exp:rating:form entry_id=“{entry_id}“ form_name=“widget_rating” required=“” require_membership=“no” notify=“admin@mydomain.com” admin_template=“admin_template” anonymous=“yes” status=“open” return=“{path={segment_1}/{segment_2}/{segment_3}/}“}
<input type=“hidden” name=“email” value=“test@test.com” /><input type=“hidden” name=“name” value=“anonymous” /><input type=“hidden” name=“rating” value=“4” />
<td>
<input type=“image” src=“/themes/rating_themes/default/images/star-0.gif” name=“rating” id=“rating4” value=“4”  onmouseover=“this.src=‘/themes/rating_themes/default/images/star-100.gif’” onmouseout=“this.src=‘/themes/rating_themes/default/images/star-0.gif’” /></td>
{/exp:rating:form}

{exp:rating:form entry_id=“{entry_id}“ form_name=“widget_rating” required=“” require_membership=“no” notify=“admin@mydomain.com” admin_template=“admin_template” anonymous=“yes” status=“open” return=“{path={segment_1}/{segment_2}/{segment_3}/}“}
<input type=“hidden” name=“email” value=“test@test.com” /><input type=“hidden” name=“name” value=“anonymous” /><input type=“hidden” name=“rating” value=“5” />
<td>
<input type=“image” src=“/themes/rating_themes/default/images/star-0.gif” name=“rating” id=“rating5”  onmouseover=“this.src=‘/themes/rating_themes/default/images/star-100.gif’” onmouseout=“this.src=‘/themes/rating_themes/default/images/star-0.gif’” /></td>
{/exp:rating:form}

 

I’m basically repeating the form 5 times (one form for each star). only issue is that my rollovers don’t work in IE and, on the mac, onlly individual stars get rollovers. that is, I’d prefer that all 5 stars get highlighted when I rollover the fifth star to indicate that this is the highest rating. so when you roll over star #4, it should highlight star 1, 2, 3 and 4 - not just star 4).

hope that helps and makes sense.

Yes, that makes sense. Thanks for sharing.

How do you get Pirco’s example to ‘freeze’ at the rating you gave it and not allow you to vote again?

I also think having some sort of ajax approach that is easier for the newb would be a good thing for this Module. I have two, 5-star rating bars on my site’s articles and each time you rate one of them, the whole page refreshes. I wish there was an easy way for a non-developer to solve that problem.

fifteen,

The docs on the rating:form function should tell you how to prevent duplicate ratings by the same person. Did you find anything there?

mk

Edit: allow_duplicates actually does work for me, sorry!

Ok good.