SpringBoot、Thymeleaf、BootStrapでデータの受け渡しをしてレコードごとの削除モーダルを作りたい。

前提・実現したいこと

SpringBoot、Thymeleaf、BootStrapで削除確認用モーダルを作りたいのですが、レコードごとに表示内容を変えたいです。JavaScriptでデータの受け渡しができることが分かったのですが、
データ内容がモーダルにうまく表示できずに困っています。ご教授のほどお願いします。
最終的には下記モーダル内の、th:action内に、データを持たせたいと考えています。

発生している問題・エラーメッセージ

モーダル呼び出し時に、データの取得ができない。

該当のモーダル

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog"
			aria-labelledby="exampleModalLabel" aria-hidden="true">
			<form th:action="@{/deleteDep/{id}}" method="POST" id="delete">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" ></h5>
							<button type="button" class="close" data-dismiss="modal"
								aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
						<div class="modal-body">

							<p id="name-name"></p>

							<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>
					</div>
				</div>
			</form>
		</div>

該当のJavaScript

<script>
			$('#deleteModal').on('show.bs.modal', function(event) {
				var button = $(event.relatedTarget) //モーダルを呼び出すときに使われたボタンを取得
				var id = button.data('id') //data-id の値を取得
				var name = button.data('name') //data-nameの値を取得

				//Ajaxの処理はここに

				var modal = $(this) //モーダルを取得
				modal.find('.modal-title').text('削除する部署' + name) //モーダルのタイトルに値を表示
				modal.find('.modal-body #name-name').val(name) //ｐタグにも表示

			})
		</script>

該当の呼び出しボタン

<tr th:each="dep:${deploymentData}">
						<td class="text-center w-25"><input type="text"
							class="form-control" form="sort" min="0" max="999"></td>
						<td th:text=${dep.deployment_name}></td>

						<td class="text-center"><input type="hidden" name="id"
							th:value="${dep.id}" form="${dep.id}"></input> <a type="button"
							class="btn btn-primary"
							th:href="@{/selectDepEdit/{id}(id=${dep.id})}">編集</a></td>

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

現状idについては、データの渡し方と使い方がわからず、ノータッチです。
何卒宜しくお願い致します。

追記

デバックを行ったところ、JavaScriptが呼ばれていないということがわかり、自作のjsファイルを作り、その中にモーダル呼び出しを書いたところ、データの送信とdep,deployment_nameの表示は行うことができました。<form th:action="@{/deleteDep/{id}}"のidに、モーダルから送ったデータを持たせたい場合、どのような記述になるのでしょうか。

m.ts10806

2020/09/03 04:18

var button = $(event.relatedTarget) 上記、目的のボタンは取れてるんでしょうか

kazu5942

2020/09/03 04:29

ご回答いただきましてまことにありがとうございます。このボタンはどのように取れているということが確認できるのでしょうか。

m.ts10806

2020/09/03 05:10

要はない「デバッグしてください」という意味です。ひとまずconsole.log()から

kazu5942

2020/09/03 06:05

JavaScriptが動作していないことがわかったので、自作のjsファイルを作ったところ、呼び出しと、deployment_nameの送信は行うことができました。<form th:action="@{/deleteDep/{id}}"のidにモーダルからdep.idを送りたい場合、どのような処理をするのがよいでしょうか。

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

回答1件

ベストアンサー

BootstrapのModalであれば、呼び出し側のボタンに、例えば

html
1th:data-id="${dep.id}"

が用意されてますので、

javascript
1$('#deleteModal').on('show.bs.modal', function(event) {
2  var button = $(event.relatedTarget) //モーダルを呼び出すときに使われたボタンを取得
3  var id = button.data('id')
4}