質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.36%

レビュー投稿画面で星が表示されません

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,595

score 31

やりたいこと
レビュー投稿画面に、星評価を付ける。

試したこと
http://gouf.hatenablog.com/entry/2018/02/05/003548
を参考に、星評価の機能を実装

コード
application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>また行きたい。あの場所に</title>
    <%= csrf_meta_tags %>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <%= stylesheet_link_tag  'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="//maps.google.com/maps/api/js?key=AIzaSyCoIYTEtDMVuKMTdsBcS9o1FjVe3Z3atfw&callback=initMap" type="text/javascript"></script>
    <script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
    <script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js' type='text/javascript'></script>
    <script src="node_modules/raty-js/vebdor/jquery.js"></script>
    <script src="node_modules/raty-js/lib/jquery.raty.js"></script>
    <script src="javascripts/kuchikomis.js"></script>
    <link rel="stylesheet" href="../lib/jquery.raty.css">
    <link href="stylesheets/labs.css" media="screen" rel="stylesheet" type="text/css">
  </head>

  <body>
    <%= render 'layouts/navbar' %>

    <div class="container">
      <%= render 'layouts/flash_messages' %>

      <%= yield %>
    </div>
  </body>
</html>

dounan_kuchikomi/new.html.erb

<div class="area dounan">
  <h1><%= @dounan.title %></h1>
  <ul class="media-list">
    <div class="row">
      <aside class="col-xs-6">
        <div class="panel panel-default">
          <div class="panel-heading">
            <li class="media">
              <h2>レビューを投稿する</h2>
              <%= form_for ([@dounan, @dounan_kuchikomi]) do |f| %>
                <%= f.label :rate, '評価' %><br />
                <div class="raty" data-rating ="<%= @dounan_kuchikomi.rate %>"></div><br />
                <%= f.label :title, '題名' %>
                <%= f.text_field :title, class: 'form-control', rows: 5 %>
                <%= f.label :picture, '写真' %>
                <%= f.file_field :picture %><br />
                <%= f.label :content, 'レビュー' %>
                <%= f.text_area :content, class: 'form-control', rows: 5 %>
                <br />
                <%= f.submit '投稿' , class: 'btn btn-success btn-lg'%>
              <% end %>
            </li>
          </div>  
        </div>
      </aside>
    </div>
  </ul>
</div>

読み込んだjavascript
node_modules/raty-js/vebdor/jquery.js
https://github.com/wbotelhos/raty/blob/master/vendor/jquery.js

node_modules/raty-js/lib/jquery.raty.js
https://github.com/wbotelhos/raty/blob/master/lib/jquery.raty.js

javascripts/kuchikomis.js

// Place all the behaviors and hooks related to the matching controller here.
// All this logic will automatically be available in application.js.

// jQuery Plugin. Set/show rating by star
function initRaty() {
  if($('.raty-read').length) {
    $('.raty-read').raty({
      starType: 'i',
      space: false,
      readOnly: true,
      score: function() { return $(this).data('rating') }
    })
  }

  if($('.raty').length) {
    $('.raty').raty({
      starType: 'i',
      target: '#review_rate', // Sync rating to #review_rate
      targetKeep: true,
      targetType: 'number',
      space: true,
      score: function() { return $(this).data('rating') }
    })
  }
}

$(document).on('load turbolinks:load', initRaty)

読み込んだCSS
jquery.raty.css
https://github.com/wbotelhos/raty/blob/master/lib/jquery.raty.css

labs.css
https://github.com/wbotelhos/raty/blob/master/demo/stylesheets/labs.css

※javascript,cssは、リポジトリ内のコードを改変せず、そのまま使用

因みに、私は、フォントではなく、画像で星を表示させたいため、https://github.com/wbotelhos/raty/tree/master/lib/images
から画像をダウンロードしました。

可能性のある原因
読み込むべきjavascriptが間違っている。
javascriptのコードを修正していない。
dounan_kuchikomis/new.html.erbの記述が間違っている。

<%= form_for ([@dounan, @dounan_kuchikomi]) do |f| %>
                <%= f.label :rate, '評価' %><br />
                <div class="raty" data-rating ="<%= @dounan_kuchikomi.rate %>"></div><br />
                <%= f.label :title, '題名' %>
                <%= f.text_field :title, class: 'form-control', rows: 5 %>
                <%= f.label :picture, '写真' %>
                <%= f.file_field :picture %><br />
                <%= f.label :content, 'レビュー' %>
                <%= f.text_area :content, class: 'form-control', rows: 5 %>
                <br />
                <%= f.submit '投稿' , class: 'btn btn-success btn-lg'%>
              <% end %>


form_for内に<div>タグが含まれている。

などが考えられます。

知りたい事
今回の、レビュー画面に星が表示されない原因は、

  • javascriptに問題があるのか?
  • dounan_kuchikomis/new.html.erbの書き方に問題があるのか?
  • その他に問題があるのか?

以上のことについて知りたいです。

ruby on railsを始めて1年以内であり、まだ知識についてとても浅いです。
お分かりの方がいらっしゃいましたら、よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る