ajax响应后关闭引导模式

Question

我正在登录页面上使用Grails<formRemote>标记和Bootstrap Modal 除了我不知道如何在登录成功后关闭de模式。

有：

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

在登录失败，我更新＃模体与我的控制器（的LoginController）返回的errorMessage，这是不错，但如果登录成功（的ajaxSuccess方法在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> 

这里是引导模态片段，使内部＃模体

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

的登录表单模板，这是authfail和的ajaxSuccess方法从的LoginController

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>