Star Rating in Ajax with Ruby on Rails

Rails How to create ajax star rating

I'm the author of the RateIt plugin.
I have a small clue about Ruby On Rails, but I'll try to answer the question as good as possible.

The RateIt control doesn't submit automatically when something gets rated. You have to bind to the rated event.

If your form is setup correctly, the following Javascript should work:

AJAX submission:

<script type ="text/javascript">
jQuery('.rateit').bind('rated reset', function (e) {
var ri = jQuery(this);

//disable voting...
ri.rateit('readonly', true);
//add a span with the selected rating after the rateit plugin.
ri.after('<span class="rating">' + ri.rateit('value') + '</span>');

//if the use pressed reset, it will get value: 0 (to be compatible with the HTML range control), we could check if e.type == 'reset', and then set the value to null .
var frm = ri.closest('form');

url: frm.attr('action'), //your server side script
data: frm.serialize(), //our data
type: 'POST',
success: function (data) {
//write here something when everything went ok

error: function (jxhr, msg, err) {
alert(msg); //something went wrong.

non-AJAX submission

 <script type ="text/javascript">
jQuery('.rateit').bind('rated reset', function (e) {

Star rating in AJAX with Ruby On Rails

Check out ajaxful-rating plugin.

rails star rating system - ajaxful-rating

You are missing a table in your database (probably required by the gem). Are you sure you have migrated your database?

You must run the script which probably generates migrations, but then you must also:

rake db:migrate

or bundle exec rake db:migrate if required.

Make sure that you have run the generate script (from the README):

script/generate ajaxful_rating UserModelName

The generator takes one argument: UserModelName, which is the name of
your current user model. This is necessary to link both the rate and
user models.

Also this generator copies the necesary images, styles, etc.

Example: I suppose you have generated already an authenticated model…

script/generate authenticated user sessions
script/generate ajaxful_rating user

So this call will create a Rate model and will link it to your User

This section in the README definitely implies a migration is generated.

Rails ajax rating help how to create a helper method to display stars

I would suggest you have a look at using the jQuery RateIt plugin.

It is entirely client side JavaScript and CSS. It also sports some sweet unobtrusive JavaScript and progressive enhancement. I've been pleased with it in my projects.

Once you've included jquery.rateit.min.js, rateit.css, delete.gif and star.gif into your public directories, you might have something like the following inside your rails form:

<%= f.text_field :ratings, :size => 1, :min => 0, :max => 5, :step => 1 %>
<div class="rateit" data-rateit-backingfld="#item_ratings" data-rateit-resetable="true">

The ID in data-rateit-backingfld should match the ID produced by the text_field form helper for your items field.

Clearly, this is using HTML5 data attributes, but if you're using Rails 3, then you'll be using HTML5 by default.

Star rating system in rails

If you want just add a new rating, remove casino.ratings.last. keep only

Rails help creating ajax star rating

The problem is that vind is not defined in your partial and you aren't passing it as a local variable either. To fix this you'll want to change rate.js to pass vind as the local variable instead of konkurrancer:

$('#<%= @container %>').html('<%= escape_javascript(render(partial: 'rating', locals: { vind: @konkurrancer })) %>');

and in your konkurrancer partial:

<%= render 'rating', :remote => true, locals: { vind: vind } %>

You can then leave your ratings partial as it is with id:

Raty star rating not showing up

Your div for the rating is (probably) missing the label and text_field. You should do something like this:

  <div class="field">
<div id="star-rating"></div>
<%= f.label :rating %><br>
<%= f.text_field :rating %>

Rails 3 rateable model - How to create ajax rating?

What I did recently to add a simple rating mechanism to an existing project was the following:

I added two fields to an existing table (which contained the items to be rated). Those were:

rating_score => The current score
ratings => The number of ratings which led to the score

For example, if five users would've voted "5" for the current item, rating_score would be 25, and ratings would be 5. The current rating would be computed as rating_score / ratings.

Then I added a new method to the controller of the items to be rated, called "rate", which looked something like:

def rate
@item = Item.find(params[:id])
@container = "item"

@item.rating_score += params[:rating].to_i
@item.ratings += 1

respond_to do |format|

My view for that method, called rate.js.erb, would look something like

$('#<%= @container %>').html('<%= escape_javascript(render(partial: 'rating', locals: { item: @item })) %>');

This code works only if you've got jQuery installed, but it should be easily translatable to Prototype or whatever JS framework you may be using.

And the partial for the rating, called _rating.html.erb, was something like:

<%= form_tag url_for(controller: 'items',  action: 'rate', id:, remote: true %>
<%= rating_stars(item.rating_score, item.ratings) %>
<%= item.ratings %> Votes

In this partial, the rating_stars() helper method generated some kind of star-like representation for the rating, but you can do that however you like.

By setting "remote: true" in the form_tag helper, your Rails installation should automatically transmit the request via the installed Javascript framework. This magic is part of the whole unobtrusive javascript thing going on in Rails lately, which is actually pretty cool.

Hope this gives you an idea of how to realize a very simple rating system with no IP lock feature whatsoever in Rails.

Related Topics

Leave a reply