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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

5821閲覧

RailsでjQuery ratyを使いたい。

marutama_giant

総合スコア16

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/06/21 06:45

編集2017/06/23 14:56

##実現したいこと・現状の問題

Ruby on Rails(5.0.0.1)にて、こちらの記事を参考にして星型レビューRatyを使いたいと考えています。

・/lib/jquery.raty.min.jsをassets/javascriptのフォルダに入れる。
・/lib/imgの中身を全てassets/imagesのフォルダに入れる。

上記まで終わって、つづいてビューの記述に入ったのですが、表示できません。
ミン大となっているのは下記2点です。

(1) jQuery Ratyで星型レビューを表示させる(hoverしたときに星の色が変わる仕組みを想定)
(2) Railsのformに格納する記述法が想像つかない。

Ruby

1<%= f.select :rate, {'1' => 1, '2' => 2, '3' => 3, '4' => 4, '5' => 5,}, class: "form-control" %>

通常であれば上記のような記述法で数字を選択してDBに保存するかと思います。しかし、今回のようなUIではどのような記述法が正しいのかが文献いくつか見てみたのですが、思い当たりません。

##該当するソースコード

<_form.html.erb>

<%= form_with(model: user, local: true) do |form| %> <% if user.errors.any? %> <div id="error_explanation"> <h2><%= pluralize(user.errors.count, "error") %> prohibited this user from being saved:</h2> <ul> <% user.errors.full_messages.each do |message| %> <li><%= message %></li> <% end %> </ul> </div> <% end %> <div class="field"> <%= form.label :name %> <%= form.text_field :name, id: :user_name %> </div> <div class="field"> <%= form.label :email %> <%= form.text_field :email, id: :user_email %> </div> <div class="field"> <%= form.label :rate %> <%= form.number_field :rate, id: :user_rate %> </div> <div class="field"> <div id="star">こんにちは</div> </div> <script> $('#star').raty({ size : 36, starOff: '<%= asset_path('star-off.png') %>', starOn : '<%= asset_path('star-on.png') %>', scoreName: 'review[point]' }); </script> <div class="actions"> <%= form.submit %> </div> <% end %>

<jquery.raty.js>

javascript

1/*! 2 * jQuery Raty - A Star Rating Plugin 3 * 4 * The MIT License 5 * 6 * @author : Washington Botelho 7 * @doc : http://wbotelhos.com/raty 8 * @version : 2.7.1 9 * 10 */ 11・・・

現状、viewには従来のフォーム以外は表示されていません。

##追記

ruby

1<%= form_with(model: user, local: true) do |form| %> 2 <% if user.errors.any? %> 3 <div id="error_explanation"> 4 <h2><%= pluralize(user.errors.count, "error") %> prohibited this user from being saved:</h2> 5 6 <ul> 7 <% user.errors.full_messages.each do |message| %> 8 <li><%= message %></li> 9 <% end %> 10 </ul> 11 </div> 12 <% end %> 13 14 <div class="field"> 15 <%= form.label :name %> 16 <%= form.text_field :name, id: :user_name %> 17 </div> 18 19 <div class="field"> 20 <%= form.label :email %> 21 <%= form.text_field :email, id: :user_email %> 22 </div> 23 24 <div class="field"> 25 <div id="star">こんにちは</div> 26 </div> 27 28 <script> 29 $('#star').raty({ 30 size : 36, 31 starOff: '<%= asset_path('star-off.png') %>', 32 starOn : '<%= asset_path('star-on.png') %>', 33 scoreName: 'user[rate]' 34 }); 35 </script> 36 37 <div class="actions"> 38 <%= form.submit %> 39 </div> 40<% end %>

イメージ説明

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

h_daido

2017/06/22 03:47

情報を格納したい対象は@user.rateでいいですかね?
marutama_giant

2017/06/23 14:00

はいそうです。連絡が遅くなってしまい、すみません。
guest

回答1

0

ベストアンサー

リファレンスを見てみると、ratyは
<input type="hidden">のタグを生成して、そこに星の情報をセットする
・そのhiddenのnameはscoreNameオプションで指定
とするように読めます。

ちょっとrailsで環境構築するのはメンド...すぐにはできないので未検証ですが、以下に変えて試してみてもらえますか?

html

1 <!-- 以下を一旦削除 --> 2 <div class="field"> 3 <%= form.label :rate %> 4 <%= form.number_field :rate, id: :user_rate %> 5 </div>
$('#star').raty({ size : 36, starOff: '<%= asset_path('star-off.png') %>', starOn : '<%= asset_path('star-on.png') %>', scoreName: 'user[rate]' });

この辺は、たしかにrailsでerbメインでwebを始めた人にはちょっとわかりずらいかもしれませんね。
詳細な説明はうまくいったら追記します。

うまくいかなかったらcloud9とかで検証するので、言ってください。

投稿2017/06/22 03:59

h_daido

総合スコア824

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

marutama_giant

2017/06/23 14:57

詳しい説明をいただきまして、誠にありがとうございます。 現在、いただいたところを直してみたものを追記いたしました。自分の理解力が不足しており、h_daidoさまがご指摘いただいた通りに訂正ができていないのかもしれません。。
h_daido

2017/06/26 05:45 編集

そもそも星が表示されていないのですね...。 starOffやstarOnに指定している画像パスが間違っていて読み込めていないのでは?と思います。 私がためしたところだと、 public/stars/img/フォルダを作成して、その下に ダウンロードしたファイルの/lib/img以下すべてを格納すると、とりあえずワークしていました。 (本来は、この方法だとasset_pipelineがワークしていないので、パフォーマンス面であまりよろしくないのですが...) ChromeのDeveloperToolなどでデバッグすれば、パスが間違っていて、画像読み込みが失敗しているとエラーが表示されるのでわかりやすいと思います。 asset_pipelineをちゃんと使う方法だと、 http://blog.n-z.jp/blog/2014-08-09-jquery-raty.html のあたりをためすといいかもです。 raty.jsでは画像パス指定がうまくいってなかったので(名前のみの指定?相対パスのみ?)ちょっと面倒かもです。
marutama_giant

2017/06/26 16:03

お恥ずかしながらそもそものjQueryなどをミスっていたようです。。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問