Java Thymeleaf至madal jquery

祝大家今天愉快！ 我正在做一个关于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>

函数doSomething（userid、userUsername、userNewPassword）{
警报（userid+”、“+userUsername+”、“+userNewPassword）//正在工作
var modal=$（此）
modal.find（'.modal id'）.text（userid）
modal.find（'.modal username'）.val（useruserusername）
modal.find（'.modal newPassword'）.val（userNewPassword）
} 

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

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

决定：

按钮：

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

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>

身份证件：
&时代；
用户名：
密码：
接近
拯救

---

不必将所有值都作为参数传递给函数，您可以采用更简洁的方式：

onclick="fillingModal(event)"

然后在脚本中：

function fillingModal(event){
  var useId = $(event).data("userId");
//and others...

}

---

MohamedSanaulla，这对我没用！也许重点在于thymeleaf的版本。。。不确定！在onclick=“fillingModal（event）”中写入“event”已弃用！

function fillingModal(event){
  var useId = $(event).data("userId");
//and others...

}