java - Thymeleaf 到 madal jquery

Question

祝大家有美好的一天!我正在做一个关于 SpringBoot + Thymeleaf + BootStrap4 + jQuery 的培训项目。

遇到问题 - 我无法在引导模式窗口中获取实体字段来更改表中的记录。

这是我的按钮:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" th:data-id="${userTable.id}" th:data-username="${userTable.username}" th:data-newPassword="${newPassword}"onclick="doSomething(this.getAttribute('data-id'), this.getAttribute('data-username'), this.getAttribute('data-newPassword'));">Edit</button>

这是我的模式:

<div class="modal fade" id="exampleModal" 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="modal-id">Id: </h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <form>
                <div class="form-group">
                    <label for="modal-username" class="col-form-label">Username:</label>
                    <input type="text" class="form-control" id="modal-username">
                </div>
                <div class="form-group">
                    <label for="modal-newPassword" class="col-form-label">Password:</label>
                    <input type="text" class="form-control" id="modal-newPassword"></input>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save</button>
        </div>
    </div>
</div>

这是我的脚本:

<script type="text/javascript">
function doSomething(userid, userUsername, userNewPassword) {
        alert(userid + ", " + userUsername + ", " + userNewPassword) //working
        var modal = $(this)
        modal.find('.modal-id').text(userid)
        modal.find('.modal-username').val(userUsername)
        modal.find('.modal-newPassword').val(userNewPassword)
    } </script>

通过按钮，我调用 jquery 函数，将用户数据传输到该函数。在函数中我想填充 bootstrap 4 模式窗口。

我尝试了不同的选择。具有多个参数的警报可以工作，但模态窗口则不行!我将很高兴得到任何帮助!

Answer 1

决定:

按钮:

<button type="button" class="btn btn-primary"
    data-target="#exampleModal"
    data-toggle="modal"
    th:data-userId="${userTable.id}"
    th:data-userUsername="${userTable.username}"
    th:data-newPassword="${newPassword}"
    onclick="fillingModal(this.getAttribute('data-userId'), this.getAttribute('data-userUsername'), this.getAttribute('data-newPassword'));">
Edit </button>

脚本:

    function fillingModal(userId, userUsername, newPassword, userRoles) {

    $("#modal-id").text("Edit user Id: " + userId);
    $("#modal-username").val(userUsername);
    $("#modal-newPassword").val(newPassword);

}

Bootstrap4 模态:

<div class="modal fade" id="exampleModal" 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="modal-id">Id: </h5>
            <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <form>
                <div class="form-group">
                    <label for="modal-username"
                           class="col-form-label">Username:</label>
                    <input type="text" class="form-control" id="modal-username">
                </div>
                <div class="form-group">
                    <label for="modal-newPassword" class="col-form-label">Password:</label>
                    <input type="text" class="form-control" id="modal-newPassword">
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary"
                    data-dismiss="modal">Close
            </button>
            <button type="button" class="btn btn-primary">Save</button>
        </div>
    </div>
</div>