SpringBoot Bootstrapを用いたThymleafでのModal表示について。

Question

前提・実現したいこと

SpringBoot、Thymleaf、BootStrapを用いて、テーブルのレコード削除ボタンを押した際に、
モーダルウィンドウを表示させたいのですが、その際モーダル内の表示内容を各レコードに応じて変更させたいです。
どこにModalを置けばいいかわからずに困っています。

Thymeleaf

<!-- 表 -->
			<!-- datatables -->
			<table id="example" class="table table-striped table-bordered"
				style="width: 100%">
				<thead>
					<tr>
						<th>ソート順</th>
						<th>名前</th>
						<th>メールアドレス</th>
						<th>部署</th>
						<th>編集</th>
						<th>削除</th>
						<th>初期化</th>
						<th>管理者権限</th>
					</tr>
				</thead>
				<tbody>

					<tr th:each="emp:${empData}">
						<td class="text-center"><input type="text"
							class="form-control" min="0" max="999" name="sort_num"
							th:value="*{sort_num}" form="sort"></td>
						<td th:text=${emp.emp_name}>ユーザー名</td>
						<td th:text=${emp.emp_name}>メールアドレス</td>
						<td th:text=${emp.deployment_id}>部署</td>

						<td class="text-center">
							<form action="/deleteEmp" method="POST" id="edit">
								<input type="hidden" name="emp_id" th:value="${emp.id}">
								<input type="submit" class="btn  btn-dark text-center"
									value="編集" form="edit">
							</form>
						</td>

						<!-- モーダル出力 -->
						<td class="text-center"><a href=""
							class="btn btn-danger text-center" data-toggle="modal"
							data-target="#deleteModal+${emp.id}">削除</a></td>

						<!-- モーダル出力 -->
						<td class="text-center"><a href=""
							class="btn btn-danger text-center" data-toggle="modal"
							data-target="#exampleModal1+${emp.id}">初期化</a></td>

						<!-- 権限の有無 -->
						<td class="text-center">
							<div th:if="${emp.identify}=='0'">
								<h5>なし</h5>
							</div>
							<div th:if="${emp.identify}=='1'">
								<img src="@{/img/lock.png}" alt="権限付与">
							</div>
						</td>
						
					</tr>
					


				</tbody>
			</table>
		</div>

		<!-- Modal -->
		<div class="modal fade" id="deleteModal+${emp.id}" tabindex="-1"
			role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="exampleModalLabel">削除確認画面</h5>
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<form action="/deleteEmp" method="POST" id="delete">
						<div class="modal-body">
							<p th:text="${emp.emp_name}+${emp.emp_mail}"></p>
							<input type="hidden" name="emp_id" th:value="*{emp_id}"
								form="delete">
							<p>上記データの削除を実行します</p>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary"
								data-dismiss="modal">キャンセル</button>
							<input type="submit" class="btn btn-danger" form="delete">削除
						</div>
					</form>
				</div>
			</div>
		</div>

		<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog"
			aria-labelledby="#exampleModal1+${emp.id}" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="exampleModalLabel">初期化確認画面</h5>
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<form action="/grant" method="POST" id="gran">
						<div class="modal-body">
							<p th:text="${emp.emp_name}+${emp.emp_mail}"></p>
							<input type="hidden" name="selectEditId" value="${emp.emp_id}"
								form="gran">
							<p>上記社員のパスワード初期化を実行します</p>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary"
								data-dismiss="modal">キャンセル</button>
							<input type="submit" class="btn btn-danger" value="削除"
								form="gran">
						</div>
					</form>
				</div>
			</div>
		</div>

試したこと

現状はこのようになっています。Modalを<tr th:each="emp:${empData}">のループの中に入れないといけないと考えていろいろな箇所に試したのですが、うまくいきませんでした。
正しい配置を教えていただけますと幸いです。

Answer 1

Modalはループ外に1個置いておいて、モーダルトリガーのボタンとかにIDなど主キー情報をdata属性で埋め込んでおき、別途押下時のイベントを設けてそこからAjaxでデータを取得すると良いと思います。

※一覧に出ている情報がモーダルに持っていきたい情報全てなら主キー情報以外も全部data属性にもっておいて拾うのでも良いと思いますが。

とりあえず下記で各レコードのIDは取れます。

<a href="" class="btn btn-danger text-center deletemodalbtn" data-toggle="modal" data-target="#deleteModal" th:data-id="${emp.id}">削除</a>

$(document).on('click','.deletemodalbtn',function(e){
  let id = $(e.currentTarget).data('id');
});

「データをセットするまでモーダル出現は待機したい」ならこのクリックイベントで.modal('show')を別途呼び出すと良いです。

Comments

[kazu5942]

ご回答いただきましてありがとうございます。data属性にもたせて、Modalで拾うやり方で実装しようと思うのですが、拾い方について詳しく教えていただけますでしょうか。

[m.ts10806]

もしかしたらコメントと入れ違いになっていたかもしれませんが、13:51に編集で追記しています。