railsを用いた評価システム作成の際、意図せず星が重複してしまいます。

Question

前提・実現したいこと

プログラミング初心者です。
現在、ruby、ruby on railsを用いて、本の感想を投稿したり、その評価を投稿したりするシステムを作っております。
ユーザーからの投稿がなされると、その投稿結果が、indexに表示されるシステムにしたいと考えております。
今回の問題は、5段階評価で評価をつけて投稿をすると、index画面に遷移した際（ヘッダーのBooksを押したとき）、星が一瞬10個表示（画像１）され、5個に戻る（画像２）という挙動が見受けられました。

この、10個星が表示されてしまう挙動をなくしたいと考えております。
何か解決策はないでしょうか。

画像１

画像２

画像３（修正後）

発生している問題・エラーメッセージ

5段階評価で表示したいが、一瞬だけ、星が10個表示されてしまう。

エラーメッセージ:なし

該当のソースコード

【books/index.html.erb】

<%= render 'searchform' %>
<% if @book.errors.any? %>
  <ul>
    <% @book.errors.full_messages.each do |message| %>
      <li><%= message %></li>
    <% end %>
  </ul>
<% end %>

<div class='container px-5 px-sm-0'>
  <div class='row'>
    <div class='col-md-3'>
      <h2>User info</h2>
      <%= render 'users/info', user: current_user %>
      <h2 class="mt-3">New book</h2>
      <%= render 'form', book: @book %>
    </div>
    <div class='col-md-8 offset-md-1'>
      <h2>Books</h2>
      <%= render 'index', books: @books, book: @book %>
    </div>
  </div>
</div>

【books/_index.html.erb】
<table class='table table-hover table-inverse'>
  <thead>
    <tr>
      <th></th>
      <th>Title</th>
      <th>Opinion</th>
      <th colspan="3"></th>
    </tr>
  </thead>
  <tbody>
    <% books.each do |book| %>
      <%= render 'books/book', book: book %>
    <% end %>
  </tbody>
</table>

【books_controller.erb】

class BooksController < ApplicationController

  def show
    @book = Book.find(params[:id])
    @book_new = Book.new
    @user = @book.user
    @book_comment = BookComment.new
  end

  def index
    @books = Book.all
    @book = Book.new
  end

  def create
    @book = Book.new(book_params)
    @book.user_id = current_user.id
    if @book.save
      redirect_to book_path(@book), notice: "You have created book successfully."
    else
      @books = Book.all
      render 'index'
    end
  end

  def edit
    @book = Book.find(params[:id])
    @user = @book.user
    if @user == current_user
      render :edit
    else
      redirect_to books_path
    end
  end

  def update
    @book = Book.find(params[:id])
    if @book.update(book_params)
      redirect_to book_path(@book), notice: "You have updated book successfully."
    else
      render "edit"
    end
  end

  def destroy
    @book = Book.find(params[:id])
    @book.delete
    redirect_to books_path
  end
  
  def search
    @range = params[:range]
    search = params[:search]
    keyword = params[:keyword]
    @books = User.search(search, keyword)
  end

  private

  def book_params
    params.require(:book).permit(:title, :body, :evaluation)
  end

end

【book.rb】
class Book < ApplicationRecord
 belongs_to :user
 has_many :book_comments, dependent: :destroy
 has_many :favorites, dependent: :destroy

 def favorited_by?(user)
  favorites.where(user_id: user.id).exists?
 end

 validates :title, presence: true
 validates :body, presence: true, length: {maximum: 200}
 validates :evaluation, numericality: {
    less_than_or_equal_to: 5,
    greater_than_or_equal_to: 1
  }
 
 def self.search(searches, keywords)
   if searches == "perfect_match"
	  @book = Book.where("title LIKE? OR body LIKE?", "#{keywords}", "#{keywords}")
   elsif searches == "forward_match"
    @book = Book.where("title LIKE? OR body LIKE?", "#{keywords}%", "#{keywords}%")
   elsif searches == "backward_match"
    @book = Book.where("title LIKE? OR body LIKE?", "%#{keywords}", "%#{keywords}")
   else
    @book = Book.where("title LIKE? OR body LIKE?", "%#{keywords}%", "%#{keywords}%")
   end
 end
end

【books/_book.html.erb】
<tr>
  <td>
    <%= link_to user_path(book.user) do %>
      <%= attachment_image_tag(book.user, :profile_image, :fill, 50, 50, fallback: "no-image-icon.jpg") %>
    <% end %>
  </td>
  <td><%= link_to book.title, book_path(book), class: "book_#{book.id}" %></td>
  <td><%= book.body %></td>

  <td id="favorite-btn-<%= book.id %>">
    <%= render partial: "favorites/favorite-btn",locals: {book: book } %>
  </td>

  <td id="comments">
    コメント数:<%= book.book_comments.count %>
  </td>
  
  <td class="book-evaluation" data-score="<%= book.evaluation %>"></td>
</tr>
  
<script>
$('.book-evaluation').raty({
  readOnly: true,
  path: '/assets/'
});
</script>

試したこと

classやidの変更などを行いましたが、上手く解決できませんでした。

補足情報（FW/ツールのバージョンなど）

必要な情報が足りていないかもしれませんので、必要な情報がございましたら、お教えください。

Comments

[okuramasafumi]

該当のコントローラーとモデルのコードも共有をお願いします！

Answer 1

コードを書きのように修正をしたところ、解決いたしました。
恐らく、book-evaluationにIDがついておらず、識別ができていなかったことが原因だと思われます。
お時間をいただき、ありがとうございました。

【_index.html.erb】
<td>
        <div id="book-evaluation_<%= book.id %>"></div>
          <script>
          $('#book-evaluation_<%= book.id %>').raty({
            size: 20,
            starOff:  '<%= asset_path('star-off.png') %>',
            starOn : '<%= asset_path('star-on.png') %>',
            starHalf: '<%= asset_path('star-half.png') %>',
            half: true,
            readOnly: true,
            score: <%= book.evaluation %>,
          });
          </script>
</td>

Answer 2

なるほど、Ratyというものがあるのですね、初めて知りました。

原因はRatyの書き方だと思います。data属性からJSで取ってくるのでその分のラグがある感じです。

まずはbooks.eachの部分をさらにパーシャル（_book.html.erb）に分割し、その各パーシャル内でRatyの初期化を記述すればいけるかなと思います。

【books/_index.html.erb】
<table class='table table-hover table-inverse'>
  <thead>
    <tr>
      <th></th>
      <th>Title</th>
      <th>Opinion</th>
      <th colspan="3"></th>
    </tr>
  </thead>
  <tbody>
    <% books.each do |book| %>
      render partial: 'book', locals: {book: book}
    <% end %>
  </tbody>
</table>

【books/_book.html.erb】
<tr>
        <td>
          <%= link_to user_path(book.user) do %>
            <%= attachment_image_tag(book.user, :profile_image, :fill, 50, 50, fallback: "no-image-icon.jpg") %>
          <% end %>
        </td>
        <td><%= link_to book.title, book_path(book), class: "book_#{book.id}" %></td>
        <td><%= book.body %></td>

        <td id="favorite-btn-<%= book.id %>">
          <%= render partial: "favorites/favorite-btn",locals: {book: book } %>
        </td>

        <td id="comments">
          コメント数:<%= book.book_comments.count %>
        </td>

        <td class="book-evaluation" data-score="<%= book.evaluation %>"></td>
      </tr>

<script>
$('.book-evaluation').raty({
    readOnly: true,
    score: <%= book.evaluation %>,
    path: '/assets/'
  });
</script>

Comments

[n-s0120]

ご回答ありがとうございます。

お教えいただいたコードを記載したのですが、同様の症状が起きてしまうようです・・・。

【その各パーシャル内でRatyの初期化を記述すれば】
とお教えいただきましたが、その点につき、私が理解できておらず、記述していただいた部分以外の手直しができていないことが原因かと思われます。

初学者故、こちらの不明点をお教えいただけますと幸いです。

何卒、よろしくお願いいたします。

[okuramasafumi]

`.raty`内の`score`の行を消してみるとどうなるでしょうか？

[n-s0120]

消してみたところ、星が増えてしまいました・・・。（画像３を追加しました）

ただ、もしかしますと、教えていただいたコードですとエラーが出てしまうため、修正した箇所がございますので、そちらの影響を受けている可能性があります。

元の質問に修正を反映しましたが、こちらでも補足いたします。

①_books.html.erb内で、locals {book :book}　を記述すると_index.html.erbの「book」がnameErrorとなり、@bookではないか？と言われてしまう。

②render 'book', locals: {book: book}　を <%= %>で囲み、編集をし直しました。

ご教示いただけますと幸いです。

[okuramasafumi]

すみません、回答を編集しました、`render partial: 'book', locals: {book: book}`が正しいです。
星が増えるのは、`numberMax: 5`の記述を`.raty`の中に追加することで直るかもしれません。