ajax响应后关闭引导模式

Question

我正在使用Grails <formRemote> 标签和Bootstrap Modal 处理登录页面 一切正常，除了登录成功后我不知道如何关闭模式。

与：

$('#myModal').modal('hide')

登录失败时，我使用控制器返回的 errorMessage (LoginController) 更新 #modal-body，这很好，但是当登录成功时 (ajaxSuccessLoginController 中的 /strong> 方法）我重定向到主页，我不知道此时如何告诉模态框关闭。

我们将不胜感激。

这是发送 AJAX 调用的表单模板 sn-p。

<g:formRemote  url="[controller:'j_spring_security_check', action:'']"
    name="loginForm"
    update="modal-body"
    class="form-inline"
    on401="alert('error');">
    <input type="text" name="j_username"  class="input" placeholder="email" autocomplete="on" value="" id="j_username">
    <input type="password" name="j_password" class="input" placeholder="password" value="" id="j_password">
    <input  id="loginButton" type="submit" value="Login" class="btn"
        data-trigger="manual" data-toggle="popover" data-placement="bottom" data-html="true"  data-content="<span></span>" />
    <div class="login-message" id="login-message">${message}</div>
</g:formRemote>

<script>
    <g:if test="${message == 'success'}">
        $(function() {
            $('#myModal').modal('hide');
        });
    </g:if>
</script>

这是在 #modal-body

中呈现 loginForm 模板的 Bootstrap Modal sn-p

<div id="cont">
    <div class="modal fade hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-remote="">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Login/Register</h3>
        </div>
        <div id="modal-body" class="modal-body">
            <g:render template="/login/templates/loginForm"></g:render>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
        </div>
    </div>
</div>

这是 LoginController 中的 authfail 和 ajaxSuccess 方法

def authfail = {
    def username = session[UsernamePasswordAuthenticationFilter.SPRING_SECURITY_LAST_USERNAME_KEY]
    String errorMessage = ''
    def exception = session[WebAttributes.AUTHENTICATION_EXCEPTION]

    if (exception) {
        if (exception instanceof AccountExpiredException) {
                errorMessage = g.message(code: "springSecurity.errors.login.expired")
            }
            else if (exception instanceof CredentialsExpiredException) {
                errorMessage = g.message(code: "springSecurity.errors.login.passwordExpired")
            }
            else if (exception instanceof DisabledException) {
                errorMessage = g.message(code: "springSecurity.errors.login.disabled")
            }
            else if (exception instanceof LockedException) {
                errorMessage = g.message(code: "springSecurity.errors.login.locked")
            }
            else {
                errorMessage = g.message(code: "springSecurity.errors.login.fail")
            }
        }
        if (springSecurityService.isAjax(request)) {
            render(template: '/login/templates/loginForm', model: [message:errorMessage])
            //render(errorMessage)
        }
    else {
        render view: '/index' , params: params
        //redirect action: 'auth', params: params
        //render([error: msg] as JSON)
    }
}

这是 ajaxsuccess 方法

def ajaxSuccess = {  
    render(template: '/login/templates/loginForm', model: [message:"success"])        
}

我保留了注释行，这样你就可以看到我试图做什么。

提前致谢

Answer 1

如果您的 gsp 看起来像这样：

<div id="modal-body">
   <g:render template="/login/templates/loginForm" model="[errorMessage:'none']" />
</div>

<g:formRemote ....

您可以简单地向您的模板添加一些 javascript，当 Dom 完全更新为 ajax 响应时，它将运行 并确保 errorMessage 变量初始设置为“无”

    <div id="cont">
        <div class="modal fade hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-remote="">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Login/Register</h3>
            </div>
            <div id="modal-body" class="modal-body">
                <g:render template="/login/templates/loginForm"></g:render>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
            </div>
        </div>
    </div>
    <script>
        <g:if test="${errorMessage == 'success'}">
            // it will only close if the errorMessage from ajax is 'success, wich by the way is not an error ^^
            $(function() {
                $('#myModal').modal('hide');
            });
        </g:if>
    </script>