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 に答える