ajax响应后关闭bootstrap模式

Question

我使用Grails <formRemote>代码和Bootstrap Modal在登录页面上工作 一切正常，但我不知道如何在登录成功后关闭de modal。

使用：

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

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

非常感谢一些帮助。

以下是发送 AJAX 调用的表单模板代码段。

<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模板

<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变量初始化为如上所述设置为“none”

    <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>