表单提交后,Bootstrap模式将无法打开

时间:2017-06-19 18:57:24

标签: javascript jquery html ajax twitter-bootstrap

我只是在用户提交包含“成功”消息或错误消息的表单后尝试打开模式。无论我尝试什么,这个模态都不会打开。这是代码:

<div class="container-fluid" align="center">

    <c:catch var="exception">${messages}</c:catch>
    <c:if test="${not empty exception}">
        <div style="text-align: left; color: orange">
            <c:forEach var="msg" items="${messages}">
      MESSAGE: ${msg}<br />
            </c:forEach>
        </div>
    </c:if>




    <div>

        <form action="/save">
            <table class="viewtable">
                <tbody>
                    <tr>
                        <td class="labelfield">lab_id:</td>
                        <td>${lab.lab_id}<input name="lab_id" type="hidden"
                            value="${lab.lab_id}" /></td>
                    </tr>
                    <tr>
                        <td class="labelfield">display_name:</td>
                        <td><input name="display_name" type="text"
                            value="${lab.displayName}"></input></td>
                    </tr>
                    <tr>
                        <td class="labelfield">lab_type_id:</td>
                        <td><input name="lab_type_id" type="text"
                            value="${lab.lab_type_id}"></input></td>
                    </tr>
                    <tr>
                        <td class="labelfield">aventail_profile:</td>
                        <td><input name="profile" type="text"
                            value="${lab.profile}"></input></td>
                    </tr>
                    <tr>
                        <td class="labelfield">status:</td>
                        <td><input name="status" type="text" value="${lab.status}"></input></td>
                    </tr>
                    <tr>
                        <td class="labelfield">notes:</td>
                        <td><input name="notes" type="text" value="${lab.notes}"></input></td>
                    </tr>
                </tbody>

            </table>


            <button type="submit" id="formSubmit" class="btn btn-primary" data-toggle="modal" data-target="#editLabModal" >Save Changes</button>
        </form>

        <div class="modal fade" id="editLabModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <div class="modal-body">
                        <c:catch var="exception">${messages}</c:catch>
                        <c:if test="${not empty exception}">
                            <div style="text-align: left; color: orange">
                                <c:forEach var="msg" items="${messages}">
                                MESSAGE: ${msg}<br />
                                </c:forEach>
                            </div>
                        </c:if>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="close" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

如果有人有任何建议,我们将不胜感激!

1 个答案:

答案 0 :(得分:0)

您无法在完整页面发布后打开模式,您需要通过Ajax提交表单并在响应后显示

此处的示例jQuery AJAX submit form