Raty.jsを使用して星評価を行うレビューサイトの実装をしています。
ページネーション実装の際にBootstrapを使用したところ、すでに表示されていたRaty.jeが表示されなくなりました。Jqueryの理解が浅く解決方法がわかりません。
下記のBootstrap JavaScript読み込みコード部分を消すとRaty.jsが正常に作動しますがBootstrapが表示されなくなります。両方を表示させるようにしたいです。
app/views/layouts/application.html.erb
<!DOCTYPE html> <html> <head> <title></title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <!-- コード追加 Bootstrap CSS読み込みコード--> <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_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <!-- コード追加 Bootstrap JavaScript読み込みコード--> </head> <body> <%= yield %> </body>
app/javascript/packs/application.js
// This file is automatically compiled by Webpack, along with any other files // present in this directory. You're encouraged to place your actual application logic in // a relevant structure within app/javascript and only use these pack files to reference // that code so it'll be compiled. require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") window.$ = window.jQuery = require('jquery'); require('packs/raty') // Uncomment to copy all static images under ../images to the output folder and reference // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) // or the `imagePath` JavaScript helper below. // // const images = require.context('../images', true) // const imagePath = (name) => images(name, true)
app/views/reviews/index.html.erb
<div class="review-star"> <div id="star-rate-<%= review.id %>"></div> </div> <script> $('#star-rate-<%= review.id %>').raty({ size: 5, starOff: '<%= asset_path('star-off.png') %>', starOn : '<%= asset_path('star-on.png') %>', half: true, readOnly: true, score: <%= review.rate %>, }); </script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。