###環境
AWS cloud9
Rails 5.2.5
Ruby 2.6.3
Raty.jsを使用
前提・実現したいこと
本のレビューアプリを作成中です。_form.html.erbで新規と編集は同じフォームをパーシャルにしています。新規の時だけJavascriptが発火し、編集の時にはその評価が変更できないようにしたいです。
books/_form.html.erb
<%= form_with model:book,local:true do |f| %> <div class="form-group"> <%= f.label :title %> <%= f.text_field :title, class: 'form-control book_title' %> </div> <div class="form-group"> <%= f.label :opinion %> <%= f.text_area :body, class: 'form-control book_body' %> </div> <div class="form-group"> _________________________________ <div id="evaluate_stars"> ##編集の時はここをReadonlyにしたい _________________________________ <label>Rate</label> </div> </div> <div class="form-group"> <%= f.submit class: 'btn btn-success' %> </div> <% end %> <script> $('#evaluate_stars').raty({ starOn: "<%= asset_path('star-on.png') %>", starOff: "<%= asset_path('star-off.png')%>", starHalf: "<%= asset_path('star-half.png')%>", scoreName: 'book[evaluation]' }); </script>
books/show.html.erb
<div class='container'> <div class='row'> <div class='col-md-3'> <h2>User info</h2> <%= render 'users/info', user: @user %> <%= render 'users/follow_form', user: @user %> <h2 class="mt-3">New book</h2> <%= render 'form', book: @newbook %> </div> <div class='col-md-8 offset-md-1'> <h2>Book detail</h2> <table class='table'> <tr id="book_<%= @book.id %>"> <td><%= link_to user_path(@book.user) do %> <%= attachment_image_tag(@book.user, :profile_image, :fill, 50, 50, fallback: "no-image-icon.jpg") %><br> <%= @book.user.name %> <% end %> </td> <td><%= link_to @book.title, book_path(@book) %></td> <td><%= @book.body %></td> <% if @book.user == current_user %> <td><%= link_to 'Edit', edit_book_path(@book), class: "btn btn-sm btn-success edit_book_#{@book.id}" %></td> <td><%= link_to 'Destroy', book_path(@book), method: :delete, data: { confirm: '本当に消しますか?' }, class: "btn btn-sm btn-danger destroy_book_#{@book.id}"%></td> <% end %> <td> <div id="likes_buttons_<%= @book.id %>"> <%= render 'favorites/favorite-btn', book: @book %> </div> <td class="comments-count">コメント件数:<%= @book.book_comments.count %></td> ___________________________________________________________________ <td class="book-evaluation" data-score="<%= @book.evaluation %>"></td> ##評価表示部分 ___________________________________________________________________ </tr> </table> <div class="comments_area"> <%= render 'book_comments/index', book_comments: @book_comments %> </div> <%= render 'book_comments/form', {book_comment: @book_comment, book: @book} %> </div> </div> </div> </div> <script> $('.book-evaluation').raty({ readOnly: true, score: function() { return $(this).attr('data-score'); }, path: '/assets/' }); </script>
###試したこと
フォームの中でnew_record?メソッドを使って条件分岐してみましたが、うまくいきません。Javascriptで分岐させる方がいいのでしょうか??
_form.html.erb 抜粋
. . . <% if book.new_record? %> <div class="form-group"> <div id="evaluate_stars"> <label>Rate</label> </div> <% else %> </div> <td class="book-evaluation" data-score="<%= book.evaluation %>"></td> <% end %> . . . <script> $('#evaluate_stars').raty({ starOn: "<%= asset_path('star-on.png') %>", starOff: "<%= asset_path('star-off.png')%>", starHalf: "<%= asset_path('star-half.png')%>", scoreName: 'book[evaluation]' }); $('.book-evaluation').raty({ readOnly: true, score: function() { return $(this).attr('data-score'); }, path: '/assets/' }); </script>
あなたの回答
tips
プレビュー