Bootstrapでモーダルウィンドウを実装したいが上手くいかない

###実現したいこと
Bootstrapでモーダルウィンドウを実装したい。

###問題点
現在下記のページに沿ってモーダルを入れようと思っているのですが、
エラーも出ずにモーダルウィンドウが出てこない現象で困っております。
Bootstrap公式ページ

自身でも調べているのですが、基本コピペでいけるとありますが、
足りていない設定などございますでしょうか？
よろしくお願いいたします。

html
1
2<!DOCTYPE html>
3<html lang='ja'>
4<head>
5<meta charset='utf-8'>
6<meta content='width=device-width, initial-scale=1, shrink-to-fit=no' name='viewport'>
7<meta name="csrf-param" content="authenticity_token" />
8<meta name="csrf-token" content="1NBi4xKXK7SSCYk/oJRCwJvcROr0YSspBukTsgwv4EtIkmXGSD/lxJ1ZOA5/ywCjHvE0WYLKLEAIfektDRk5Xw==" />
9<title>Soudan</title>
10<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'>
11<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
12<link crossorigin='anonymous' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' integrity='sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T' rel='stylesheet'>
13<link rel="stylesheet" media="all" href="/assets/application.self-0760b0caec9a3f061eb68fbab64baa08fc41ec72dd36ce766dbcd9eb49678a37.css?body=1" data-turbolinks-track="reload" />
14<script crossorigin='anonymous' integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo' src='https://code.jquery.com/jquery-3.3.1.slim.min.js'>
15<script crossorigin='anonymous' integrity='sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1' src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js'>
16<script crossorigin='anonymous' integrity='sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM crossorigin=' src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'>
17<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1" data-turbolinks-track="reload"></script>
18<script src="/assets/rails-ujs.self-8944eaf3f9a2615ce7c830a810ed630e296633063af8bb7441d5702fbe3ea597.js?body=1" data-turbolinks-track="reload"></script>
19<script src="/assets/bootstrap.self-09d5758928f5b534e7f68535367193f5349e427ade5f252ceac2f52c6d4285be.js?body=1" data-turbolinks-track="reload"></script>
20<script src="/assets/action_cable.self-69fddfcddf4fdef9828648f9330d6ce108b93b82b0b8d3affffc59a114853451.js?body=1" data-turbolinks-track="reload"></script>
21<script src="/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1" data-turbolinks-track="reload"></script>
22<script src="/assets/cropper.min.self-c6e3f806ba812080e1fb9fff09b2f5a67155dab41f446edde727427db7012c70.js?body=1" data-turbolinks-track="reload"></script>
23<script src="/assets/jquery-3.4.0.min.self-a3316ed32b95e2f46588733005d9cb77f0b85c8f69118bb382134aa63a0eefb7.js?body=1" data-turbolinks-track="reload"></script>
24<script src="/assets/user.self-ecb67a5e4c005dc42b4def096344fd49ae35604c9f42bc37570a38716f4372d2.js?body=1" data-turbolinks-track="reload"></script>
25<script src="/assets/application.self-50b60e0c43ebd6008b6b4a492f178f9d38e6ce13207e74bc82c7aa61d581e234.js?body=1" data-turbolinks-track="reload"></script>
26</head>
27<body>
28<!-- Button trigger modal -->
29<button class='btn btn-primary' data-target='#exampleModal' data-toggle='modal' type='button'>
30Launch demo modal
31</button>
32<!-- Modal -->
33<div aria-hidden='true' aria-labelledby='exampleModalLabel' class='modal fade' id='exampleModal' role='dialog' tabindex='-1'>
34<div class='modal-dialog' role='document'>
35<div class='modal-content'>
36<div class='modal-header'>
37<h5 class='modal-title' id='exampleModalLabel'>Modal title</h5>
38<button aria-label='Close' class='close' data-dismiss='modal' type='button'>
39<span aria-hidden='true'>×</span>
40</button>
41</div>
42<div class='modal-body'>
43...
44</div>
45<div class='modal-footer'>
46<button class='btn btn-secondary' data-dismiss='modal' type='button'>Close</button>
47<button class='btn btn-primary' type='button'>Save changes</button>
48</div>
49</div>
50</div>
51</div>
52
53</body>
54</html>
55

js
1// モーダル
2$('#myModal').on('shown.bs.modal', function () {
3  $('#myInput').trigger('focus')
4})

行動規範の内容に同意します

回答3件

自己解決

皆さま
ご返信ありがとうございました。
頂いた情報を元に試し、下記の記述を加えることで動きました。
公式にも書いていないですが、色々と難しいですね。

app/assets/javascripts/application.js
1//= require bootstrap-sprockets

投稿2019/05/13 01:32

params_bird

総合スコア26

no1knows

2019/05/14 01:58

せっかくrubyを利用しているならgemの利用をおすすめします。「RubyGemsはRuby用のパッケージ管理ツールで、ライブラリの作成や公開、インストールを助けるシステムです。このライブラリを使用することで、自分で１からコードを書かなくても簡単に機能を実装することができます。」 gemを探してなければ、自分で実装という流れが一般的かと。 //= require bootstrap-sprocketsはgemの公式にも記載されております。 https://github.com/twbs/bootstrap-rubygem

行動規範の内容に同意します

直接的な回答じゃなくて申し訳ないのですが、Rails＋Modalで作ったときに参考にしたサイトを共有させていただきます。
こちらに沿って作成すればRails標準のremote: trueを利用してスマートかと思います。
https://qiita.com/niwaken/items/ffbce52fb024fd369f24

投稿2019/05/13 01:05

no1knows

総合スコア3365