0

我在我的 Web 应用程序中实现的弹出模式遇到了一些问题。在这种情况下，当我单击“用户”表中的第二项时，模式不会激活，尽管当我单击第一项时它可以工作。另一件事是当我在第一个项目上打开模式然后关闭它，然后尝试重新打开它时不会弹出。有任何想法吗？我呼吁弹出模式：

$("#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();
                });

在我使用下面的此功能提交模态表单后，我无法再次激活模态。

.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); 
                    } 
                });

实例化此 ajax 的按钮：

<td>
                    <button data-togle="modal" href="#updateModal" id="update_user_button" class="btn btn-primary" value="${user.id}">Update</button>
                </td>

然后是实际的模态本身：

<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">&times;</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 -->
4

1 回答 1

4

看起来带有 id 的按钮update_user_button在您的表中重复，元素的 id 在文档中必须是唯一的。

在这种情况下，使用类属性而不是 ID。data-toggle="modal"由于您$("#updateModal").modal('toggle')在单击处理程序中使用，因此也无需使用。

<td>
    <button class="btn btn-primary update_user_button" value="${user.id}">Update</button>
</td>

和

<div class="modal hide fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="Update User Information" aria-hidden="true">

然后

// 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();
});

演示：小提琴

于 2013-10-12T00:30:27.263 回答