In the below xhtml snipett, I need to display only the a4j:commandButton (Apply) when the page initially renders. When the user clicks the apply button, the rich:panel and two rich:progressBar components need to be displayed.
With the code as is below, the rich:panel displays as well as the Apply button on initial load of the page. How can I hide (using rendered attribute?) the entire rich:panel and contents when the page first loads and then show it and everything inside when the user clicks the Apply button? I tried using rendered on rich:panel but that does not work (the progressBars don't display when I click the Apply button). thx.
<a4j:outputPanel>
<rich:panel id="progressPanel">
<a4j:outputPanel id="progressPanel1">
<rich:spacer width="70"/>
<h:outputText value="Updating ERS" rendered="#{!progressBarWebService.buttonRendered}"/>
<rich:progressBar value="#{progressBarLocalDB.currentValue}"
interval="1000"
label="#{progressBarLocalDB.label}"
enabled="#{progressBarLocalDB.enabled}"
completeClass="color: yellow;"
finishClass="color: red;"
minValue="-1"
maxValue="100">
<f:facet name="initial"></f:facet>
<f:facet name="complete">
<br />
<h:outputText value="Process Done" />
</f:facet>
</rich:progressBar>
</a4j:outputPanel>
<a4j:outputPanel id="progressPanel2">
<rich:spacer width="60"/>
<h:outputText value="Adding ICOMS Note" rendered="#{!progressBarWebService.buttonRendered}"/>
<rich:progressBar value="#{progressBarWebService.currentValue}"
interval="1000"
label="#{progressBarWebService.label}"
enabled="#{progressBarWebService.enabled}"
minValue="-1"
maxValue="100">
<f:facet name="initial"></f:facet>
<f:facet name="complete">
<br />
<h:outputText value="Process Done" />
</f:facet>
</rich:progressBar>
</a4j:outputPanel>
</rich:panel>
<rich:spacer height="100"/>
<rich:spacer width="80"/>
<a4j:commandButton action="#{equipmentProcessingView.apply}"
value="Apply"
reRender="progressPanel, newStatusDecorator"/>
</a4j:outputPanel>