自从过去两天以来,我通过实施一种简单的方法让用户采取以下步骤而感到困惑:
到目前为止我所取得的成就是:
我可以在用户点击修改之后在模态窗口打开之前过滤掉点击的条目
$(this).closest('tr').find('.userID').text()
或
$(button.relatedTarget).attr('id')
但是我无法将必要的userID移交给我的updateModal()JS函数。我需要我的Spring MVC控制器的ID。
当我尝试在updateUser()函数中获取这些参数时,它们就消失了。因此,在用户点击编辑按钮和显示模式之间我丢失了这些信息。它们仅在单击编辑按钮后才能直接使用,但不能在以后使用。
我需要的是在模式视图打开后使这些参数可用的方法,以及当用户点击发送时我可以将userID发送到控制器。< / p>
我找到了这个选项:
localStorage.setItem('key', 'value');
但它没有帮助我,因为我的updateUser函数不知道模态正在使用什么ID。
这是我的JS:
function updateUser() {
alert("try getting parameter");
alert($(this).closest('tr').find('.userID').text()); //not working HELP pls
alert($(button.relatedTarget).attr('id')); //not working too
alert("success?");
var newValues = {};
newValues["newName"] = $("#newName").val();
newValues["newAge"] = $("#newAge").val();
var userID = "???";
$.ajax({
type: "POST",
contentType: "application/json",
url: "/api/edit/" + userID,
data: JSON.stringify(newValues),
dataType: 'json',
timeout: 100000,
success: function (data) {
console.log("SUCCESS: ", data);
display("SUCCESS");
resultObj = data.result;
},
error: function (e) {
console.log("ERROR: ", e);
display("ERROR");
//display(2);
},
done: function (e) {
console.log("DONE");
display("DONE");
enableSearchButton(true);
}
});
}
这是我的HTML:
<!--- start table -->
<div class="container">
<br>
<h3>Overview</h3>
<br>
<div class="container" id="modal-submit">
<div class="col-12">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">ID</th>
</tr>
</thead>
<tbody>
<!--/*@thymesVar id="productList" type="java.util.List"*/-->
<tr id="person" th:each="person : ${elementList}">
<td th:text="${person.getName()}" id="username"></td>
<!--/*@thymesVar id="getTradableBTC" type="java.lang.Double"*/-->
<td th:text="${person.getAge()}" th:id="${person.getName()+person.getAge()}" id="age"></td>
<!--/*@thymesVar id="getTop" type="java.lang.Double"*/-->
<td th:text="${person.getId()} " th:id="${person.getName()+person.getId()}" class="userID"></td>
<td>
<div class="btn-toolbar" role="toolbar">
<!-- Button trigger modal -->
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
data-target="#myModal" data-th-id="${person.getId()}">
Edit
</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-outline-danger btn-sm" id="delete">Delete
</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<button class="btn btn-primary" type="button" id="addElement">Add Element</button>
<button class="btn btn-light" type="button" id="DeleteAll">Delete all Elements</button>
</div>
</div>
<br>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Change data</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
<div class="row">
<div class="col-sm-6">
<div class="modal-body">
<input name="referencia" id="newName" type="text"
class="form-control"
placeholder="Enter new name">
<br>
<input name="referencia" id="newAge" type="text"
class="form-control"
placeholder="Enter new age">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light"
data-dismiss="modal">Discard
</button>
<button type="button" class="btn btn-primary"
onclick="updateUser()">Save
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
答案 0 :(得分:1)
您问题的一个可能解决方案是
$(this).closest('tr').find('.userID').text()
将您在上面检索到的用户ID存储到模型DOM
var userId = $(this).closest('tr').find('.userID').text();
$("#myModal").data('currentUserId', userId);
在updateUser
中从DOM获取用户ID。
var userId = $("#myModal").data('currentUserId');
基本上,您需要将UserID存储在全局上下文中,一旦模型关闭为updateUser
,您就可以访问它,并且将在不同的上下文中调用表行单击两者。
此外,我认为您需要阅读此https://stackoverflow.com/a/3127440/2509344以了解this
在JavaScript中的工作原理。