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

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

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

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

jQuery

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

Q&A

解決済

RailsでRatyを使って星を表示させたいが表示できない

NASKA--
NASKA--

総合スコア21

Ruby on Rails 6

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

jQuery

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

1回答

0グッド

0クリップ

472閲覧

投稿2022/11/03 17:42

環境

ruby 3.1.2
rails 6.1.4
raty 4.1.0

実現したいこと

・ratyを使い、本の投稿時にレビューをできるようにしたい

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

books:109 Uncaught TypeError: $(...).raty is not a function at books:109:16

該当のソースコード

_form.html.erb

1<%= form_with model:book,local:true do |f| %> 2 <div id="error_explanation"> 3 <% if book.errors.any? %> 4 <h3><%= book.errors.count %>errors prohibited this obj from being saved:</h3> 5 <ul> 6 <% book.errors.full_messages.each do |message| %> 7 <li><%= message %></li> 8 <% end %> 9 </ul> 10 <% end %> 11 </div> 12 <div class="form-group"> 13 <%= f.label :title %> 14 <%= f.text_field :title, class: 'form-control book_title' %> 15 </div> 16 <div class="form-group"> 17 <%= f.label :opinion %> 18 <%= f.text_area :body, class: 'form-control book_body' %> 19 </div> 20 <div class="form-group row" id="star"> 21 <%= f.label :star,'評価 ', class:'col-md-3 col-form-label' %> 22 <%= f.hidden_field :star, id: :review_star %> 23 </div> 24 <script> 25 $('#star').empty(); 26 $('#star').raty({ 27 size : 36, 28 starOff: '<%= asset_path('star-off.png') %>', 29 starOn : '<%= asset_path('star-on.png') %>', 30 scoreName: 'book[star]', 31 half: false, 32 }); 33 </script> 34 <div class="form-group"> 35 <%= f.submit class: 'btn btn-success' %> 36 </div> 37<% end %>

application.js

1// This file is automatically compiled by Webpack, along with any other files 2// present in this directory. You're encouraged to place your actual application logic in 3// a relevant structure within app/javascript and only use these pack files to reference 4// that code so it'll be compiled. 5 6import Rails from "@rails/ujs" 7import Turbolinks from "turbolinks" 8import * as ActiveStorage from "@rails/activestorage" 9import "channels" 10import "jquery" 11import "popper.js" 12import "bootstrap" 13import '@fortawesome/fontawesome-free/js/all'; 14import "../stylesheets/application" 15window.$ = window.jQuery = require('jquery'); 16require('packs/raty') 17 18Rails.start() 19Turbolinks.start() 20ActiveStorage.start()

enviroment.js

1const { environment } = require('@rails/webpacker') 2 3const webpack = require('webpack') 4environment.plugins.prepend( 5 'Provide', 6 new webpack.ProvidePlugin({ 7 $: 'jquery/src/jquery', 8 jQuery: 'jquery/src/jquery', 9 Popper: 'popper.js' 10 }) 11) 12module.exports = environment

試したこと

yarn add jgueryをもう一度行ったりしましたが全く変わりませんでした。

以下のような質問にはグッドを送りましょう

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

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

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

自己解決

最新のratyのバージョンであるとjqueryに依存しないらしく、

<script> $('#star').empty(); new Raty(document.querySelector('#star'), { size : 36, starOff: '<%= asset_path('star-off.png') %>', starOn : '<%= asset_path('star-on.png') %>', starHalf: '<%= asset_path('star-half.png') %>', scoreName: 'book[star]', half: true }); </script>

このように書けばいいようでした

投稿2022/11/05 13:44

NASKA--

総合スコア21

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

Ruby on Rails 6

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

jQuery

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