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

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

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

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

Ruby

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

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

3回答

2624閲覧

Error("The bootstrap modal plugin does not appear to be loaded.")を解消したい。

yujiro0320

総合スコア11

Ruby on Rails 5

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

Ruby

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

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2019/08/09 15:54

編集2019/08/09 16:02

前提・実現したいこと

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 の再起動
変化なし

以上、エラーに対しての対応策がわかりません。ご教授頂ければと思います。よろしくお願いいたいます。

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

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

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

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

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

guest

回答3

0

ベストアンサー

エラーが発生しているのは下記の部分という事だと思います。

if ($.fn.modal == undefined) { throw new Error("The bootstrap modal plugin does not appear to be loaded."); }

このメッセージが起きた直接の原因は、$.fn.modal == undefined というIF文の条件が成り立った事ですから、$.fn.modal が undefinedのまま放置されたまま、問題のコードに迄達したのかを追っていくのがデバッグの手段として適切だと思われます。

質問には、$.fn.modal が何なのかを推測できるだけのコードも説明もありませんので、アドバイスできる方は少ないと思います。

エラーが起きた箇所周辺のコードを質問に追加することをお勧めします。

投稿2019/08/10 01:22

coco_bauer

総合スコア6915

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

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

0

自己解決しました。ご回答ありがとうございました!

投稿2019/08/10 04:04

編集2019/08/10 04:07
yujiro0320

総合スコア11

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

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

0

解決しました。 
うまく読み込めていない事にシンプルに気づきました。

#結論

requireされていなかった。

app/aseets/javascripts/application.js

//= require bootstrap-sprockets

#実施した事

(1)bootstrapのバージョンが古いので、変更した

変更前 gem bootstrap-sass 変更後 gem 'bootstrap'

(2)読み込んでいないデーターを読み込ませた。

app/aseets/javascripts/application.js

//= require bootstrap-sprockets

#変更した箇所の記載

app/aseets/javascripts/application.js

//= require activestorage //= require jquery //= require bootstrap-sprockets #追加 //= require rails-ujs //= require data-confirm-modal //= require_tree .

#参考にした記事

https://qiita.com/NaokiIshimura/items/c8db09daefff5c11dadf

https://qiita.com/kamishun/items/b529a14cab39291b5910

投稿2019/08/10 03:10

編集2019/08/10 03:14
yujiro0320

総合スコア11

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問