RichFaces 文件上传不重新渲染

Question

我正在尝试在上传文件（照片）后重新渲染几个组件，但由于某种原因，上传完成后，这些组件没有被重新渲染。有人可以帮忙吗？ 我在 Tomcat 6 中运行应用程序的 64 位 Windows 7 机器上使用 Java 1.6 JSF 1.2 Richfaces 3.3.3 Seam 2.2GA；

<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>

我终于想出了一个解决方案，我调用了一个 a4j:jsFunction 来重新渲染组件并从 onuploadcomplete 事件中调用它（参见下面的代码）

<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

问题是您正在尝试重新渲染第一次加载页面时未渲染的组件，这将是 photoGrid 组件。

为了使其工作，您应该将非渲染组件包装在一个UIContainer（如<a4j:outputPanel>）中，该组件将始终被渲染并重新渲染更大的容器。

<!--
     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>