foreachされたモーダルで同じデータしか検出されない問題

Question

仕様技術
java,springboot,bootstrap,thymeleaf

[実現したいこと]
モーダルで確認動作を行った後、
申請番号と申請ステータスを送信したいです。

[問題]
モーダルを開いた後に申請番号の値が引き継がれておらず、送信されません。
thymeleafにてbootstrapを使い、テーブルをforeachさせているのですが、
テーブル内に組み込まれたモーダルボタンを押して更新処理などをすると、
毎回一番上のデータのみ更新されます。

[原因]
thymeleafでボタンもforeachさせているため、
モーダルを発火させるidが、すべて同一の物となり、
どこを押しても同じデータの処理画面にいきついてしまいます。

[やってみたこと]
モーダルにid="{#approval${vacationApp.vacationappNo}"など変数を組み込んでみたのですが、
モーダル自体が開かなくなりました。
foreachされるデータ毎にidをインクラインさせ、固有のidを振れば解決すると思ったのですが、
そもそもモーダルが開かず、現状手だてが分からない状態です。

[確認できていること]
モーダルを開く前までは${vacationApp.vacationappNo}は各列に割り振られた番号の値が渡っています。
モーダルを開いた後に、必ず一番上のデータが検出され、その値が消えているようです。

					<tbody>
                            *その他<th>省略

							<!-- ROLE_ADMIN権限のときは活性 -->
							<td sec:authorize="hasRole('ADMIN')">
								<form th:action="@{/vacationAppList/approval}" method="post"
									th:object="${VacationAppApprovalForm}">
									<input type="hidden" name="vacationappNo"
										th:value="${vacationApp.vacationappNo}" /> <input
										type="hidden" name="appStatus" value="1">
									<button type="button" class="btn btn-primary btn-block"
										data-toggle="modal" data-target="#approval">承認</button>

									<!-- ボタン・リンククリック後に表示される画面の内容 -->
									<div class="modal fade" id="approval" tabindex="-1"
										role="dialog" aria-labelledby="basicModal" aria-hidden="true">
										<div class="modal-dialog">
											<div class="modal-content">
												<div class="modal-header">
													<h4>承認確認画面</h4>
												</div>
												<div class="modal-body">
													<label>申請を承認しますか？</label>
													<p th:text="${vacationApp}">
												</div>
												<div class="modal-footer">
													<button type="button" class="btn btn-default"
														data-dismiss="modal">閉じる</button>
													<button type="submit" class="btn btn-primary">承認</button>
												</div>
											</div>
										</div>
									</div>
								</form>
							</td>

							<!-- ROLE_ADMIN権限のときは活性 -->
							<td sec:authorize="hasRole('ADMIN')">
								<form th:action="@{/vacationAppList/approval}" method="post"
									th:object="${VacationAppApprovalForm}">
									<input type="hidden" name="vacationappNo"
										th:value="${vacationApp.vacationappNo}" /> <input
										type="hidden" name="appStatus" value="2">
									<button type="button" class="btn btn-danger btn-block"
										data-toggle="modal" data-target="#dismiss">否認</button>

									<!-- ボタン・リンククリック後に表示される画面の内容 -->
									<div class="modal fade" id="dismiss" tabindex="-1"
										role="dialog" aria-labelledby="basicModal" aria-hidden="true">
										<div class="modal-dialog">
											<div class="modal-content">
												<div class="modal-header">
													<h4>否認確認画面</h4>
												</div>
												<div class="modal-body">
													<label>申請を否認しますか？</label>
												</div>
												<div class="modal-footer">
													<button type="submit" class="btn btn-default"
														data-dismiss="modal">閉じる</button>
													<button type="submit" class="btn btn-danger">否認</button>
												</div>
											</div>
										</div>
									</div>
								</form>
							</td>
						</tr>
					</tbody>

bootstrapのみならず、javaやjavascript側での処理でも実現可能であれば、
どうぞご教示お願いいたします。

Comments

[1T2R3M4]

https://ja.stackoverflow.com/questions/82427

以下ご対応ください。
https://teratail.com/help#posted-otherservice

[nata425]

中止したと思っていた投稿が、別サイトで誤って投稿されていたようです。
https://ja.stackoverflow.com/questions/82427

Answer 1

仰る通りid重複が原因で、modalをループの中に入れているのが間違いだと思います。
おそらくモーダルトリガーもidでやってるのでは？
idトリガーにするとそのぶん一致するように書かなければならないので非効率です。
モーダルはループ外に置き、固有の情報はdata属性などに入れてモーダルが上がる時にJavaScriptでそれぞれ設定すると良いと思います。
※テンプレートのコードが一部だけなので他の実装次第でもありますが、それなりの改修は必要です

Comments

[nata425]

モーダルによる改修は時間がかかりそうだったため、
jsでconfirmを実装して解決いたしました。

[m.ts10806]

代替案はあって然るべきですが、それでほんとうに要件満たせるのでしょうか。