How to do please wait

Question

I have a site that access our mainframe tables to compare data that the user enters on our page. When the user hits submit, sometimes there may be a delay to access these mainframe tables of 10 sec. or possibly more depending on traffic. When the user hits submit, how could I show a please wait message/animated image until the response comes back from our mainframe?
Thanks!!!

Answer 1

I get a javascript error "Object expected" using your code. Here is my page code:
<f:view>
      <f:loadBundle basename="com.riteaid.raweb.web.resources.messages" var="msg"/>       
          <hx:scriptCollector id="scriptCollector1">
          <div id="formDiv">
          <h2><h:outputText value="#{msg.Verification_Title}" id="txtoutTitle"/></h2>        
          <h4><h:outputText value="#{msg.Verification_Title2}" id="txtoutTitle2" styleClass="/theme/main.css"/></h4>
          <p><h:outputText value="#{msg.Verification_ContentParagraph1}" id="txtoutParagraph1"/></p>
          <table width="450" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
               <td valign="top">
                <div align="center">
                <hx:graphicImageEx styleClass="graphicImageEx" id="imgRXPhoto" value="#{msg.Verification_RXPhoto}" width="400" height="159"></hx:graphicImageEx>
                </div>
                    <h:panelGrid id="pageMessages" width="450" rendered="#{Verification.rendered}" cellpadding="0" cellspacing="8" styleClass="errorTable">
                         <h:outputText value="#{msg.ImportantMessage}" id="txtoutImportantMessage" styleClass="error"></h:outputText>
                         <h:panelGrid id="errorTable" width="100%" cellpadding="0" cellspacing="0" columnClasses="errorList">
                              <h:messages id="errmsgReg" layout="table"></h:messages>
                         </h:panelGrid>
                    </h:panelGrid>
                 </td>                        
               </tr>
           </table>
             <h:form styleClass="form" id="form1">
         <table border="0" cellspacing="0" cellpadding="0" width="450">
         <tr>
              <td height="30"><h:outputText styleClass="standout" id="txtoutRegAllFieldsAsterick" value="#{msg.All_Fields_Asterick}"> </h:outputText><h:outputText styleClass="fadeout" id="txtoutRegAllFieldsRequired" value="#{msg.Cust_Profile_Update_Asterisk_Required}" style="font-size:11px;"></h:outputText></td>
           </tr>
          <tr>
          <td><img src="images/content_shell_top.gif" alt=" " width="450" height="10" /></td>
           </tr>
           <tr>
          <td class="contentShell">
               <table border="0" align="center">
                 <tr>
                   <td align="right"><span class="standout">*</span><span class="label"><h:outputText value="#{msg.Verification_FirstName}" id="txtoutFirstName" /></span></td>             
                   <td><h:inputText styleClass="inputText" id="txtFirstName" maxlength="30"></h:inputText>
                   </td>
                 </tr>
                 <tr>
                   <td align="right"><span class="label"><h:outputText value="#{msg.Verification_MidName}"
                                                  id="txtoutMid" /></span></td>
                   <td><h:inputText styleClass="inputText" id="txtMid" maxlength="1" size="4"></h:inputText></td>
                 </tr>
                 <tr>
                   <td align="right"><span class="standout">*</span><span class="label"><h:outputText value="#{msg.Verification_LastName}" id="txtoutLastName"/></span></td>
                   <td><h:inputText styleClass="inputText" id="txtLastName" maxlength="30"></h:inputText></td>
                 </tr>
                 <tr>
                   <td align="right"><span class="standout">*</span><span class="label"><h:outputText value="#{msg.Verification_StoreNumber}" id="txtoutStoreNumber"/></span></td>
                   <td><h:inputText styleClass="inputText" id="txtStoreNumber" maxlength="5" validator="#{PageDataValidator.IntegerRequired_StoreNumber}"></h:inputText></td>
                 </tr>                
                 <tr>
                   <td align="right"><span class="standout">*</span><span class="label"><h:outputText value="#{msg.Verification_ScriptName}" id="txtoutScriptNumber"/></span></td>
                   <td><h:inputText styleClass="inputText" id="txtScriptNumber" maxlength="7" validator="#{PageDataValidator.IntegerRequired_ScriptNumber}"></h:inputText></td>
                 </tr>
                 <tr>
                   <td align="right"><span class="standout">*</span><span class="label"><h:outputText value="#{msg.Verification_DateFilled}" id="txtoutDateFilled"/></span></td>
                   <td><h:inputText styleClass="inputText" id="txtMonth" size="2" maxlength="2" validator="#{PageDataValidator.IntegerRequired_Month}"><hx:inputHelperAssist autoTab="true" /></h:inputText> / <h:inputText
                                                  styleClass="inputText" id="txtDay" size="2" maxlength="2" validator="#{PageDataValidator.IntegerRequired_Day}"><hx:inputHelperAssist autoTab="true" /></h:inputText> / <h:inputText
                                                  styleClass="inputText" id="txtYear" size="4" maxlength="4" validator="#{PageDataValidator.IntegerRequired_Year}"></h:inputText></td>
                 </tr>
                 <tr>
                 <td align="right"></td>
                 <td><span class="fadeout"><h:outputText value="#{msg.Verification_DateFilled_Example}" id="txtoutDateFilled_example"/></span></td>
               </tr>
               </table>
               </td>
           </tr>
           <tr>
          <td><img src="images/content_shell_bot.gif" alt=" " width="450" height="10" /></td>
           </tr>
           <tr>
          <td height="50" align="right">
          <hx:commandExButton type="submit" styleClass="button" id="btnContinue" action="#{Verification.submit}" onclick="submitForm(this.form)" image="#{msg.Verification_ContinueButton}"></hx:commandExButton>       
          </td>
           </tr>
           <tr>
          <td height="50">
          </td>
           </tr>     
           <tr>
          <td height="50">
          </td>
           </tr>     
         </table>
         </h:form>
         </div>
         <div id="pleaseWaitDiv" style="display: none; margin-top: 200px;">
         <table width="450" border="0" align="center" cellpadding="0" cellspacing="0">
               <tr>
                  <td>
                        <center>
                        <h2>Please Wait...<br />
                           <img id="waitgif" src="images/activity_bar1.gif" alt="Please Wait..." width="120" height="19" /></h2>
                           <p>The application is  working to fullfill your process.</p>
                           </center>
                    </td>
               </tr>
          </table>
            </div>
            <script>
           function gowait() {
             document.getElementById("formDiv").style.visibility="hidden";
             document.getElementById("pleaseWaitDiv").style.visibility="visible";
             window.setTimeout('showProgress()', 500);
            function showProgress(){
             var wg = document.getElementById("waitgif");
             wg.src=wg.src;
          </script>
          </hx:scriptCollector>
     </f:view>