仕様技術
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側での処理でも実現可能であれば、
どうぞご教示お願いいたします。
回答1件
あなたの回答
tips
プレビュー