RichFaces fileUpload not reRendering - jsf

Question

I'm trying to rerender a couple of components following the upload of a file (a photo) but for some reason, upon completion of the upload, the components are not being rerendered. Could anyone please help?
I'm using Java 1.6 JSF 1.2 Richfaces 3.3.3 Seam 2.2GA on a 64 bit Windows 7 machine running the app in Tomcat 6;
<h:panelGrid columns="2" id="photoGrid"
rendered="#{not signUpAction.fileUpRendered}" styleClass="standard">
<h:graphicImage value="#{signUpAction.imageUrl}" width="150" height="171" />
<a4j:region>
<a4j:commandLink id="remove" action="#{signUpAction.removePhoto}"
reRender="a4jphotoUpload" value="Remove Photo" />
</a4j:region>
</h:panelGrid>
<h:panelGroup id="photoGroup" rendered="#{signUpAction.fileUpRendered}">
<rich:fileUpload maxFilesQuantity="1"
fileUploadListener="#{signUpAction.listener}"
addControlLabel="Add a photo..." allowFlash="true"
id="photoUploadWidget" autoclear="true"
listHeight="1" immediateUpload="true" acceptedTypes="jpg,jpeg,png,gif">
<f:facet name="label">
<h:outputText value="{_KB}KB from {KB}KB uploaded --- {mm}:{ss}" />
</f:facet>
<a4j:support event="onuploadcomplete" reRender="photoGrid,photoGroup"/>
</rich:fileUpload>
</h:panelGroup>
I finally figured out a solution, I call a a4j:jsFunction that rerenders the components and call it from the onuploadcomplete event (see the code below)
<h:panelGroup id="photoGroup" rendered="#{signUpAction.fileUpRendered}">
<rich:fileUpload maxFilesQuantity="1" fileUploadListener="#{signUpAction.listener}"
addControlLabel="Add a photo..."
id="photoUploadWidget" autoclear="true" onuploadcomplete="reloadPhotoPanel()" onfileuploadcomplete="reloadPhotoPanel()"
listHeight="1" immediateUpload="true" acceptedTypes="jpg,jpeg,png,gif">
</rich:fileUpload>
</h:panelGroup>
</a4j:outputPanel>
<a4j:jsFunction id="reloadPhotoPanel" name="reloadPhotoPanel" reRender="photoPanel,photoGrid,photoGroup" />

Answer 1

The problem is that you're trying to rerender a component that isn't rendered the first time the page loaded, this would be the photoGrid component.
In order to make it work, you should wrap the non-rendererd component inside a UIContainer (like <a4j:outputPanel>) that will be always rendered and rerender the bigger container.
<!--
now you will rerender the a4j:outputPanel
and the inner h:panelGrid will appear/dissapear
-->
<a4j:outputPanel id="photoGrid">
<h:panelGrid columns="2"
rendered="#{not signUpAction.fileUpRendered}" styleClass="standard">
<h:graphicImage value="#{signUpAction.imageUrl}" width="150" height="171" />
<a4j:region>
<a4j:commandLink id="remove" action="#{signUpAction.removePhoto}"
reRender="a4jphotoUpload" value="Remove Photo" />
</a4j:region>
</h:panelGrid>
</a4j:outputPanel>
<!--
following the same logic in the h:panelGroup that renders
the rich:fileUpload component
-->
<a4j:outputPanel id="photoGroup">
<h:panelGroup rendered="#{signUpAction.fileUpRendered}">
<rich:fileUpload maxFilesQuantity="1"
fileUploadListener="#{signUpAction.listener}"
addControlLabel="Add a photo..." allowFlash="true"
id="photoUploadWidget" autoclear="true"
listHeight="1" immediateUpload="true" acceptedTypes="jpg,jpeg,png,gif">
<f:facet name="label">
<h:outputText value="{_KB}KB from {KB}KB uploaded --- {mm}:{ss}" />
</f:facet>
<a4j:support event="onuploadcomplete" reRender="photoGrid,photoGroup"/>
</rich:fileUpload>
</h:panelGroup>
</a4j:outputPanel>