Thaldeleaf to 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>