I recently set up a star rating feature on my website by following the tutorial "Creating an Ajaxified Star Rating System in Rails 3".
Although I managed to get everything working on the index page, I noticed that the stars do not remain lit up after being clicked. I suspect there might be an issue with my JavaScript code. Is there a way to achieve this effect using CSS alone?
If you require any additional information, please feel free to ask.
Here is a snippet of my rating_ballot.js:
$(document).ready(function() {
### Makes stars stay glowing after click.
### But after its clicked, the value is saved, But the star doesn't stay glowing.
$('form.rating_ballot > label').click(function() {
$(this).siblings().removeClass("bright");
$(this).prevAll().andSelf().addClass("bright");
});
### Submits the form & saves data.
$(document).on('change', '.rating_button', function(){
$(this).parent().submit();
});
});
Here is the CSS.SCSS file:
form.rating_ballot input.rating_button { display: none; }
form.rating_ballot label.rating { cursor: pointer; display: block; height: 20px; width: 20px; float: left; }
form.rating_ballot label.rating span { display: none; }
form.rating_ballot label.rating { background-image: image-url('star-dim.png'); }
form.rating_ballot label.rating.bright { background-image: image-url('star-bright.png'); }
form.rating_ballot label.rating.glow { background-image: image-url('star-glow.png'); }
A snippet from my index.hrml.erb (books) file:
<% @books.each do |book| %>
<table id="book_<%= book.id %>">
<tbody>
<tr>
<td>
<%= book.title %>
</td>
</tr>
<tr>
<td id="rating">
<%= render :partial => 'ratings/rating', :locals =>{:book => book} %>
</td>
</tr>
<tbody>
</table>
<% end %>
_rating.html.erb contains the form structure for the ratings system.
In the create.js.erb and update.js.erb files, the updated content based on user interactions is dynamically loaded using JavaScript.
The BooksHelper module includes methods for managing the user's rating on books.
HTML CODE IN DEVELOPER TOOLS
An excerpt from the developer tools displaying HTML elements before and inside a table element.
Code before I open a table
<table class="table" id="book_1176">...</table>
<table class="table" id="book_1177">...</table>
<table class="table" id="book_1178">...</table>
<table class="table" id="book_1179">...</table>
Code After I open a Table
<table class="table" id="book_1176">
<tbody>
<tr>
<td id="rating">
<!-- Form contents -->
</td>
</tr>
</tbody>
</table>