1

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

和： 

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

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

一些帮助将不胜感激。

这是发送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 模板的Bootstrap Modal片段

<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"])        
}

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

预先感谢

4

1 回答 1

4

如果您的 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>
于 2013-10-26T13:15:06.863 回答