【Spring Boot + Thymeleaf + Boot Strap】モーダルが表示されない

前提

Javaの学習のため、Spring Bootを使用してWebアプリケーションを作成しています。
つぶやいたり、他の人のつぶやきが見れたりするTwitterのようなWebアプリケーションです。

フロントエンドはThymeleafとBoot Strapを使用しているのですが、
HTMLファイル単体では上手く表示できていた処理(モーダル)が
Webアプリケーションを稼働させて確認すると表示されず、今回質問を致しました。

環境

Java 8
Spring Boot 2.3.0
JPA
H2 Database
Thymeleaf
BootStrap 4.5.0

質問内容

ユーザが退会ボタンを押すと、
「本当に退会しますか？」のようなモーダルを出現させたいと考えて、
Boot Strapの公式HPの一番最初に出てくるStaticモーダルを参考にしました。

HTMLファイル単体で確認したときは正しくモーダルが表示されたのですが、
Spring bootを起動して、Thymeleafでデータが補完された状態だとモーダルが表示されませんでした。
※ブラウザやspring tool suiteのコンソール画面にエラーは出ていません

以下に問題のHTMLファイルを記載しますので、アドバイスを頂けないでしょうか。
退会ボタンとモーダルは一番下にあります。

html
1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org"
3	xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
4<head>
5<meta charset="UTF-8">
6<meta http-equiv="X-UA-Compatible" content="IE=edge">
7<meta name="viewport" content="width=device-width, initial-scale=1">
8<title>main</title>
9<link rel="stylesheet"
10	href="http://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
11	th:href="@{/webjars/bootstrap/4.5.0/css/bootstrap.min.css}" />
12<link rel="stylesheet"
13	href="http://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap-theme.min.css"
14	th:href="@{/webjars/bootstrap/4.5.0/css/bootstrap-theme.min.css}" />
15</head>
16
17<body>
18	<div class="container">
19
20		<h1>つぶやき君</h1>
21		<p>
22			<span sec:authentication="principal.user.name">山田</span>さん、ログイン中。
23		</p>
24
25		<form th:action="@{/logout}" method="post">
26			<button type="submit" class="btn btn-secondary btn-xs">ログアウト</button>
27		</form>
28		<p>
29			<a th:href="@{/main}" class="text-primary">更新</a>
30		</p>
31
32
33		<form th:action="@{/main}" th:object="${mutterForm}"
34			class="form-signin" method="post">
35			<div class="form-group"
36				th:classappend="${#fields.hasErrors('text')}?'has-error has-feedback'">
37				<textarea class="form-control" th:field="*{text}"
38					placeholder="120文字以下で自由につぶやいてね！" required="required"></textarea>
39				<span th:if="${#fields.hasErrors('text')}" class="help-block"
40					th:errors="*{text}">error!!</span>
41			</div>
42			<button type="submit" class="btn btn-primary">つぶやく</button>
43		</form>
44
45		<hr>
46
47		<p>みんなのつぶやき</p>
48
49		<div th:if="${#lists.isEmpty(mutters)}">つぶやきはまだ登録されていません。</div>
50		
51		<div th:unless="${#lists.isEmpty(mutters)}">
52			<table class="table table-bordered">
53				<thead class="thead-light">
54					<tr class="d-flex">
55						<th class="col-md-2">つぶやき時刻</th>
56						<th class="col-md-2">ユーザ名</th>
57						<th class="col-md-8">つぶやき</th>
58					</tr>
59				</thead>
60				<tr class="d-flex" th:each="mutter : ${mutters}">
61					<td class="col-md-2" th:text="${mutter.timestamp}">11:20</td>
62					<td class="col-md-2" th:text="${mutter.user.name}">山田太郎</td>
63					<td class="col-md-8" th:text="${mutter.text}">山田は偉い</td>
64				</tr>
65			</table>
66			
67			<!-- ページネーション -->
68			<nav aria-label="Page navigation">
69  				<ul class="pagination">
70    				<th:block th:each="i : ${ #numbers.sequence(0, page.totalPages - 1) }">
71      					<li th:if="${i ge 0}" class="page-item" th:classappend="${i eq page.number} ? 'active'">
72        					<a th:href="@{/main(page=${i})}" th:text="${i + 1}" class="page-link"></a>
73      					</li>
74    				</th:block>
75  				</ul>
76			</nav>		
77				
78		</div>
79
80		<hr>
81	
82		<form th:action="@{/user/withdrawResult}" method="post">
83			<input type="button" class="btn btn-secondary" value="退会する"
84			data-toggle="modal" data-target="#confirmWithdraw">
85
86		<!-- モーダル -->
87		<div class="modal" id="confirmWithdraw" tabindex="-1" role="dialog">
88			<div class="modal-dialog" role="document">
89				<div class="modal-content">
90					<div class="modal-header">
91						<h5 class="modal-title">退会確認</h5>
92						<button type="button" class="close" data-dismiss="modal"
93							aria-label="Close">
94							<span aria-hidden="true">&times;</span>
95						</button>
96					</div>
97					<div class="modal-body">
98						<p>退会するとあなたのつぶやきは全て削除されます。</p>
99						<p>本当に退会しますか。</p>
100					</div>
101					<div class="modal-footer">
102						<button type="button" class="btn btn-secondary"
103							data-dismiss="modal">キャンセル</button>
104						<button type="submit" class="btn btn-danger">退会する</button>
105					</div>
106				</div>
107			</div>
108		</div>
109		
110		</form>
111
112	</div>
113
114	<script
115		src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"
116		th:src="@{/webjars/jquery/3.4.1/jquery.min.js}"></script>
117	<script
118		src="http://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
119		th:src="@{/webjars/bootstrap/4.5.0/js/bootstrap.min.js}"></script>
120
121</body>
122</html>

補足

その他のソースはGitHubにあげています。（名前もろばれで恥ずかしいですが、、、）
https://github.com/uekiGityuto/mutter-web-application

今回問題となっているのはsrc/main/resources/templates/main.htmlというファイルですが、
このファイルはモーダルの記述がない状態でpushしています。

また、若干GitHubの状態よりも古いですが、WEBアプリケーションは以下から確認できます。
※モーダルはつけていません
https://mutter-web-ueki.cfapps.io/index

ログインする場合は以下のユーザが存在しています。
Username：ueki
password：1qaz2wsx

以上、宜しくお願い致します。

退会済みユーザー

2020/06/12 04:23

HTMLの処理になっている時点で「Spring Boot + Thymeleaf 」は基本関係ありません。「bootsstrap」だけの問題かと「html5」はまあいいか [java][springboot][Thymeleaf] は本問題には関係のないことかとデベロッパーコンソールなどで Javascript のエラーを確認しましょう

waito

2020/06/12 04:38

デベロッパーツールでJavaScriptのエラーが確認出来るのですね！ありがとうございます。大変勉強になりました！今確認したところ、cssやjsのロードに失敗していました。ロードに失敗している原因を確認してみようと思います。

waito

2020/06/12 04:47

jqueryを以下のように読み込んでいましたが、3.4.1ではなく、3.5.1でした。 th:src="@{/webjars/jquery/3.4.1/jquery.min.js}" html単体で表示したときは、以下から読み込んでいたので表示できたのだと思います。 https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js 単純なミスですが、自分では気づけなかったと思います。大変勉強になりました。ありがとうございます。今度からはデベロッパーツールのコンソールも確認しようと思います。

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

回答2件

ああ・・

誤りの方向性がわかったのでお勧めの設定を

webjars を利用する場合、参照関係でバージョンを正しく把握しましょう。

また以下の方法もおすすめです。

pom.xml

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>webjars-locator</artifactId>
    <version>0.40</version>
</dependency>

thymeleaf の html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"
        th:src="@{/webjars/jquery/jquery.min.js}"></script>
    <script
        src="http://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>

webjars-locator(-core) はクラスパスからバージョンを勝手に書き換えてくれます。

正しく把握するか、バージョン依存の書き方をやめましょうってとこかな

投稿2020/06/12 06:42

退会済みユーザー

総合スコア0