If you foreach a modal, only the same data is detected.

Techniques used
java, springboot, bootstrap, thymeleaf

What do you want to do

I would like to send the application number and status after the modal confirmation operation.

Problems

After opening the modal, the value of the application number has not been taken over and will not be sent.
I use bootstrap in thymeleaf and foreach the table.
If you press the modal button built into the table to update, etc.,
Only the top data is updated each time.

Cause

The buttons are foreached in thymeleaf, so all the id that ignites the modal are the same, and no matter where you press it, you will be stuck on the same data processing screen.

What I've tried

I tried to incorporate variables such as id="{#approval${vacationApp.vacationappNo}" into the modal, but the modal itself did not open.
I thought it would be solved by increasing the id for each foreach data and shaking the unique id, but the modal didn't open in the first place, so I don't know what to do at the moment.

Confirmation

${vacationApp.vacationappNo} crosses the assigned number value for each column before opening the modal.
After opening the modal, the top data is always detected and the value disappears.

if it is possible to do not only bootstrap but also java or javascript side. Please let me know.

<tbody>
        * Other <th> Omitted

        <!--- Active with ROLE_ADMIN privileges-->
        <td sec:authorize="hasRole('ADMIN')">
            <formth:action="@{/vacationAppList/approval}"method="post"
                th:object="${VacationAppAppApprovalForm}">
                <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">approval</button>

                <!--- What's on the screen after clicking the button link -->
                <div class="modal fade" id="approval" tabindex="-1"
                    role="dialog"aria-labeledby="basicModal"aria-hidden="true" >
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4>Approval confirmation screen</h4>
                            </div>
                            <div class="modal-body">
                                <label> Do you approve your application?</label>
                                <pth:text="${vacationApp}">
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default"
                                    data-dismiss = "modal" > Close </button >
                                <button type="submit" class="btn btn-primary">approval</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </td>

        <!--- Active with ROLE_ADMIN privileges-->
        <td sec:authorize="hasRole('ADMIN')">
            <formth:action="@{/vacationAppList/approval}"method="post"
                th:object="${VacationAppAppApprovalForm}">
                <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">denial</button>

                <!--- What's on the screen after clicking the button link -->
                <div class="modal fade" id="dismiss" tabindex="-1"
                    role="dialog"aria-labeledby="basicModal"aria-hidden="true" >
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4>Denial confirmation screen</h4>
                            </div>
                            <div class="modal-body">
                                <label> Do you deny your application?</label>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-default"
                                    data-dismiss = "modal" > Close </button >
                                <button type="submit" class="btn btn-danger">denial</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </td>
    </tr>
</tbody>

javascript java bootstrap thymeleaf

2022-09-30 22:00

1 Answers

Maybe the reason why the modal didn't open when I added the id individually is because I only changed the id of the div of modal, but I didn't change the data-target of button.

should open the modal if I changed it.

*Please note that the bootstrap document recommends that HTML for modals be placed at the top level due to CSS reasons.It's safe to check the layout.

Modals use position: fixed, which can measure times be a bit partial about it rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interface from other elements.

https://getbootstrap.com/docs/5.1/components/modal/ #how-it-works

2022-09-30 22:00

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656