0

Web アプリケーションに実装したポップアップ モーダルに問題があります。この状況で「ユーザー」のテーブル内の 2 番目の項目をクリックすると、モーダルはアクティブになりませんが、最初の項目をクリックすると機能します。もう1つのことは、最初のアイテムでモーダルを開いてから閉じてから、再度開こうとしてもポップアップしないことです。何か案は？モーダルをポップアップするための私の呼び出し:

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

update_user_buttonID を持つボタンがテーブルで繰り返されているように見えます。要素の 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 に答える