[英]Pop up modal only working on first element in table, and wont open again after second click
I am having some trouble with the pop up modal I have implemented into my web application. 我在Web应用程序中实现的弹出模式有些麻烦。 When I click on the second item within my table of 'users' in this circumstance, the modal does not activate, although when I click on the first one it works.
在这种情况下,当我单击“用户”表中的第二个项目时,该模式不会激活,尽管当我单击第一个项目时它会起作用。 Another thing is when I open the modal on the first item and then close it, and then attempt to re-open it does not pop up.
另一件事是,当我在第一个项目上打开模态然后关闭它,然后尝试重新打开它时,它不会弹出。 Any ideas?
有任何想法吗? My call to pop up the modal:
我的电话弹出模式:
$("#update_user_button").click(function() {
var userId = +$(this).val();
$.get('${pageContext.request.contextPath}/ajax/' + userId, function(user) {
$("#updateModal #id").val(user.id);
$("#updateModal #name").val(user.name);
$("#updateModal #username").val(user.username);
$("#updateModal #email").val(user.email);
$("#updateModal #authority").val(user.authority);
});
$("#updateModal").modal('toggle');
$("#alert").hide();
$("#error_name").hide();
});
After I submit the modal form using this function below, I cannot activate the modal again. 使用下面的此功能提交模态表格后,我无法再次激活模态。
.ajax({
type: "POST",
url: "${pageContext.request.contextPath}/updateUser",
data: $("#updateForm").serialize(),
success: function(response) {
$("#alert").show();
$("#users_table_container").load("${pageContext.request.contextPath}/users #users_table");
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("Status: " + textStatus); alert("Error: " + errorThrown);
}
});
The button to instantiate this ajax: 实例化此ajax的按钮:
<td>
<button data-togle="modal" href="#updateModal" id="update_user_button" class="btn btn-primary" value="${user.id}">Update</button>
</td>
And then the actual modal itself: 然后是实际的模态本身:
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="Update User Information" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Update User Information</h4>
</div>
<div class="modal-body">
<div id="alert" class="alert alert-success fade in">
Information has been <strong>successfully</strong> updated.
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
</div>
<form id="updateForm">
<input type="hidden" id="id" name="id" />
Name:
<input type="text" name="name" id="name" class=""/><div id="error_name" class="error_font">Username and password must be between 3 and 30 characters.</div>
<br />
User name:
<input type="text" name="username" id="username" />
<br />
Email:
<input type="text" name="email" id="email" />
<br />
Authority
<select name="authority" id="authority">
<option value="ROLE_USER">ROLE_USER</option>
<option value="ROLE_ADMIN">ROLE_ADMIN</option>
</select>
<br />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="updateUser" type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!--/ modal content: end -->
</div><!--/ modal dialog: end -->
</div><!--/ modal: end -->
Looks like the button with id update_user_button
is repeated in you table, id of a element must be unique in a document. 看起来在表中重复了id为
update_user_button
的按钮,元素的id在文档中必须是唯一的。
In this case use a class attribute instead of ID. 在这种情况下,请使用类属性代替ID。 Also there is no need to use
data-toggle="modal"
since you are using $("#updateModal").modal('toggle')
in your click handler. 另外,由于您在点击处理程序中使用了
$("#updateModal").modal('toggle')
,因此也无需使用data-toggle="modal"
。
<td>
<button class="btn btn-primary update_user_button" value="${user.id}">Update</button>
</td>
and 和
<div class="modal hide fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="Update User Information" aria-hidden="true">
then 然后
// Here we are hiding Modal To show Initially
$("#updateModal").modal({
show: false
});
$(document).on('click', ".update_user_button", function () {
var userId = +$(this).val();
$.get('${pageContext.request.contextPath}/ajax/' + userId, function (user) {
$("#id").val(user.id);
$("#name").val(user.name);
$("#username").val(user.username);
$("#email").val(user.email);
$("#authority").val(user.authority);
});
$("#updateModal").modal('show');
$("#alert").hide();
$("#error_name").hide();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.