前提・実現したいこと
gem 'data-confirm-modal'を用いてダイアログのデザインが反映されません。
デバッグすると、以下エラーが発生しています。
発生している問題・エラーメッセージ
Uncaught Error: The bootstrap modal plugin does not appear to be loaded.
エラーとなっているjqueryのソースコード
2箇所あります。
javascript
1 2(1)at data-confirm-modal.self-(省略).js?body=1:96 3 4// Detect bootstrap version, or bail out.// 5 if ($.fn.modal == undefined) { 6 throw new Error("The bootstrap modal plugin does not appear to be loaded."); 7 } 8 9(2)at data-confirm-modal.self-(省略).js?body=1:96 10 11})(jQuery); 12
ソースコードについて
###使用したgem
gem 'bootstrap-sass' gem 'jquery-rails' gem 'data-confirm-modal'
bundle後のgemlistを表示
対象と思われるファイルを抜粋
bootsnap (1.4.4, 1.4.3, 1.4.1, 1.3.2) bootstrap (4.3.1, 4.1.3) bootstrap-sass (3.4.1) data-confirm-modal (1.6.2) jquery-rails (4.3.5, 4.3.3) jquery-turbolinks (2.1.0) jquery-ui-rails (6.0.1)
###rails側の設定
記述内容を全て抜粋
app/assets/stylesheets/application.scss
@import "bootstrap-sprockets"; @import "bootstrap"; @import 'font-awesome'; @import 'setting/reset'; @import "rouge/highlight"; @import "toppage/footer"; @import "toppage/header"; @import "toppage/main"; @import "toppage/footer"; @import "from/from"; @import "setting/flash"; @import "item-show/show"; @import "item-show/comment-list"; @import "mypage/users"; @import "flag/flags"
記述内容を全て抜粋
app/assets/javascripts/application.js
//= require activestorage //= require jquery //= require rails-ujs //= require data-confirm-modal //= require_tree .
記述内容を全て抜粋
app/views/layouts/application.html.haml
haml
1%html 2 %head 3 %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/ 4 %title RubyLike 5 = csrf_meta_tags 6 = csp_meta_tag 7 = stylesheet_link_tag 'application', media: 'all' 8 = javascript_include_tag 'application', 'data-turbolinks-track': 'reload' 9 %body 10 = render './layouts/header' 11 = yield 12 = render './layouts/footer'
##現状の動作
デザイン変更できていない。デバッグすると表題のエラーが表示されている。
https://i.gyazo.com/f2de0a2d486e6760b2ae247df7741732.gif
Image from Gyazo
バージョンと環境
環境 開発環境
バージョン Rails 5.2.3
#試した事
####(1)bootstrapをうまく読み込めているかどうか?
bootstrapを使用しているクラス名にcssが反映されているか確認した。
反映されている。
css
1/* line 30, /Users/ユーザー名/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.4.1/assets/stylesheets/bootstrap/_grid.scss */ 2.container-fluid { 3 padding-right: 15px; 4 padding-left: 15px; 5 margin-right: auto; 6 margin-left: auto;
####(2)jqueryが使えるかどうか?
簡単なコードを記入して試してみた。
以下コードを記述。色の変化を確認。
app/view/layouts/application.html.haml
jquery
1 2%h1 Ajax#index 3%p#hoge 赤色になるよ 4:javascript 5 $("#hoge").css("color","red") 6
####(3)rails s の再起動
変化なし
以上、エラーに対しての対応策がわかりません。ご教授頂ければと思います。よろしくお願いいたいます。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。