Question

I have a simple login form. When I click Login, the a4j:commandButton works well and the place where contain Login form become the User Information with Logout link. But when I click the Logout link the ajax just show the status but nothing happen if I click it again the user will be logged out just what I want

That’s mean I must click twice to log the user out ??? What happen ?

<a4j:outputPanel id="login_wrapper" ajaxRendered="true">
                <h:form id="fm_logged" rendered="#{mAccount.loggedIn}">
                    <h3>User Information</h3>
                    <a4j:status name="login_form_status">
                            <f:facet name="start">
                                    <h:graphicImage library="images" name="ajax-loader.gif" />
                            </f:facet>
                    </a4j:status>

                    <h6><h:outputText value="Welcome! #{mAccount.acc.name}" /></h6>
                        <ul class="list1">
                        <li><h:link value="User Account Control" outcome="/pages/management/buyer_home" style="text-decoration:none;"></h:link></li>
                        <li><a4j:commandLink id="logout" status="login_form_status" actionListener="#{mAccount.Logout}" value="Logout" style="text-decoration:none;"></a4j:commandLink></li>
                        </ul>
                </h:form>           
                <h:form id="login-form" class="login-form" rendered="#{!mAccount.loggedIn}" >
                    <h3>Login Form</h3> 
                    <a4j:status name="login_form_status">
                            <f:facet name="start">
                                    <h:graphicImage library="images" name="ajax-loader.gif" />
                            </f:facet>
                    </a4j:status>                       
                    <h:outputText value="Wrong username or password" rendered="#{mAccount.wrongUsername}" style="color:red;" />
                    <fieldset>
                        <div class="field">
                            <label>Email: </label><h:inputText value="#{mAccount.acc.email}" /> 
                        </div>
                        <div class="field">
                            <label>Password</label><h:inputSecret value="#{mAccount.acc.password}" /> 
                        </div>
                        <div class="field">
                            <label class="alt">Remember me</label><h:selectBooleanCheckbox value="#{mAccount.rememberMe}" />
                        </div>

                        <ul>
                            <li><h:link outcome="forgot_password">Forgot your password?</h:link>
                            </li>
                            <li><h:link outcome="registration">Create an account.</h:link>
                            </li>
                        </ul>

                        <div class="wrapper">
                            <a4j:commandButton id="login" status="login_form_status" value="Login" actionListener="#{mAccount.Login}"> </a4j:commandButton>
                        </div>
                    </fieldset>
                </h:form>
            </a4j:outputPanel>

Answer 1

You’ve 2 forms. When one form re-renders the other form using ajax, then the view state of the other form will get lost. JSF won’t process the form submit then until you refreshes the form (which is what the first click is doing and hence the second click just works).

You need to rearrange the ajax re-rendering logic so that one form never re-renders the whole other form, but only its contents. So, add some containing component inside the other <h:form> with an id which you then reference using reRender attribute of the ajax command link/button from the submit form.