Show a WaitBar while a Form Submits

问题

My JSF page is the following

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:f="http://java.sun.com/jsf/core">

<h:head>
    <title>My Registration Page</title>
    <link href="stylesheet/reset.css" rel="stylesheet" type="text/css" />
    <link href="stylesheet/style.css" rel="stylesheet" type="text/css" />
    <link rel="icon" type="image/png" href="images/icons/favicon.png" />
    <script src="script/script.js" />
</h:head>
<h:body>
    <h:outputText id="progress_bar" styleClass="progress-bar" />
    <div id="login-container">
        <div class="login-logo">
            <img src="images/logo.png" />
        </div>
        <f:view>
            <div id="loin-form">
                <h1>
                    Log in to your account or <a href="#">sign up</a> to Get Started
                </h1>
                <h:form>

                    <h:inputText id="userName" value="#{loginBean.userName}"
                        label="User Name" required="true" class="txtFld">
                        <f:validator
                            validatorId="com.coinfling.validation.LoginBeanValidator" />
                    </h:inputText>
                    <h:message for="userName"></h:message>
                    <h:inputSecret id="passWord" value="#{loginBean.passWord}"
                        label="Password" required="true" class="pswrdFld">
                        <f:validator
                            validatorId="com.coinfling.validation.LoginBeanValidator" />
                    </h:inputSecret>
                    <h:message for="passWord"></h:message>
                    <p>
                        <a4j:commandLink id="forgotPasswordLink" lable="Password"
                            value="Forgot Your Password? " />
                        <a4j:commandButton id="loginButton123" render="@form,progress_bar"
                            value="Sign In" onbegin="showProgressBar();"
                            oncomplete="hideProgressBar();"
                            action="#{loginBean.validateUser}" styleClass="sign-btn" />
                    </p>
                </h:form>
            </div>


        </f:view>
    </div>

</h:body>
</html>

Now when i press the command button i want to display a progress bar, the showProgressBar() and hideProgressBar are already filled out. This is not working can anyone please tell me why ?

Kind Regards

来源：https://stackoverflow.com/questions/12998684/show-a-waitbar-while-a-form-submits

标签

jsf

richfaces