Звездные рейтинги Javascript не работает должным образом на главной странице

0

Я использовал Star Rating System, используя этот учебник http://eighty-b.tumblr.com/post/1569674815/creating-an-ajaxified-star-rating-system-in-rails-3

Все работает на странице SHOW PAGE, но на странице INDEX PAGE JavaScript не работает. Когда страница загружается, каждая книга на индексной странице имеет тот же рейтинг, что и первая книга, и она не загружает правильный рейтинг звезд каждой странице на странице.

(Я что-то упустил в начале моего кода JavaScript, например, ID?)

Новое для рельсов, пожалуйста, помогите :)

JAVASCRIPT

rating_ballot.js

### Sets up the stars to match the data when the page is loaded. 
### But applies the first Books Rating to all

$(function () {
  var checkedId = $('form.rating_ballot > input:checked').attr('id');
  $('form.rating_ballot > label[for=' + checkedId + ']').prevAll().andSelf().addClass('bright');
});

$(document).ready(function() {

    ### Makes stars glow on hover.
  $('form.rating_ballot > label').hover(
    function() {    // mouseover
        $(this).prevAll().andSelf().addClass('glow');
    },function() {  // mouseout
        $(this).siblings().andSelf().removeClass('glow');
  });

  ### Makes stars stay glowing after click.
  $('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();
  });
});

CSS.SCSS

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'); }

ПРОСМОТРЫ

show.html.erb (показать)

<div id="book<%= @book.id %>">
 <div id="rating">
   <%= render :partial => 'ratings/rating', :locals =>{:book => @book} %>
 </div>
</div>

index.hrml.erb (книги)

<% @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

<%= form_for(rating_ballot(issue.id), :html => { :class => 'rating_ballot' }, remote: true ) do |f| %>

  <%= f.label("value_1", content_tag(:span, '1'), {:class=>"rating", :id=>"1"}) %>
  <%= radio_button_tag("rating[value]", 1, current_user_rating(issue.id) == 1, :class => 'rating_button') %>

  <%= f.label("value_2", content_tag(:span, '2'), {:class=>"rating", :id=>"2"}) %>
  <%= radio_button_tag("rating[value]", 2, current_user_rating(issue.id) == 2, :class => 'rating_button') %>

  <%= f.label("value_3", content_tag(:span, '3'), {:class=>"rating", :id=>"3"}) %>
  <%= radio_button_tag("rating[value]", 3, current_user_rating(issue.id) == 3, :class => 'rating_button') %>

  <%= f.label("value_4", content_tag(:span, '4'), {:class=>"rating", :id=>"4"}) %>
  <%= radio_button_tag("rating[value]", 4, current_user_rating(issue.id) == 4, :class => 'rating_button') %>

  <%= f.label("value_5", content_tag(:span, '5'), {:class=>"rating", :id=>"5"}) %>
  <%= radio_button_tag("rating[value]", 5, current_user_rating(issue.id) == 5, :class => 'rating_button') %>

  <%= hidden_field_tag("issue_id", issue.id) %>
  <%= f.submit :Submit, style: "display: none" %>
<% end %>

create.js.erb & update.js.erb

$('#issue<%= @issue.id%> #rating').html("<%= escape_javascript(render :partial => 'ratings/rating', :locals => {:issue => @issue}) %>");

КОНТРОЛЛЕР

class RatingsController < ApplicationController
  before_filter :current_user, only: [:create, :update]

  respond_to :html, :js

  def create
    @book = Book.find_by_id(params[:book_id])
    @rating = Rating.create(params[:rating])    
    @rating.book_id = @book.id
    @rating.user_id = current_user.id
    if @rating.save
      respond_to do |format|
        format.js
        format.html { redirect_to :back }
      end
    end
  end

  def update
    @book = Book.find_by_id(params[:book_id])
    @rating = current_user.ratings.find_by_book_id(@book_id)
    if @rating.update_attributes(params[:rating])
      respond_to do |format|
        format.js
        format.html { redirect_to :back }
      end
    end
  end

end

ПОМОЩНИКИ

module IssuesHelper

  def rating_ballot(issue_id)
    if @rating = current_user.ratings.find_by_issue_id(issue_id)
        @rating
    else
        current_user.ratings.new
    end
  end

  def current_user_rating(issue_id)
    if @rating = current_user.ratings.find_by_issue_id(issue_id)
       @rating.value
    end
  end

end
  • 0
    Java и JavaScript - это два совершенно разных языка.
Теги:
rating-system

1 ответ

1
Лучший ответ

Проблема, кажется, здесь:

$(function () {
  var checkedId = $('form.rating_ballot > input:checked').attr('id');
  $('form.rating_ballot > label[for=' + checkedId + ']').prevAll().andSelf().addClass('bright');
});

Он получает id первого зарегистрированного ввода, а для всех форм присваивает рейтинг звезды этому.

Попробуйте этот код:

$(function () {
    $('form.rating_ballot').each(function() {
        var $form = $(this),
              checkedInput = $form.find('input:checked');

        checkedInput.prevAll().andSelf().addClass('bright');
    });
});
  • 0
    Удивительно! Огромное спасибо. @Behrang
  • 0
    Кстати, это также может быть причиной того, что я испытываю ту же проблему, когда кто-то нажимает на Звездный рейтинг. В настоящее время, кажется, только обновить первую книгу. Я разместил вопрос к этому здесь. stackoverflow.com/questions/20847977/...
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню