0 Replies Latest reply on Jun 16, 2008 9:43 AM by Fab Mars

    fileUpload reRender in a dataTable

    Fab Mars Novice

      Hello
      A tricky one today :
      - I'm using RF 3.2.1 on JSF RI 1.2.09b1, Facelets 1.1.14 on Glassfish V2.

      - I'm buiding a page allowing someone to CRUD some CD-releases and specify a number of tracks on them, and upload an extract for each track. These tracks are in a dataTable containing buttons to add/remove rows.

      Check this piece of facelet:

      <a4j:keepAlive beanName="releaseEdit"/>
      
      <h:form id="releaseEditForm">
      
       <!-- CD-RELEASE CODE HERE -->
      
       <!-- CD-TRACKS CODE FOLLOWING -->
       <h:outputLabel value="Tracks"/>
       <rich:simpleTogglePanel id="trackTable" switchType="ajax" ajaxSingle="true" opened="false">
       <rich:dataTable value="#{releaseEdit.trackRows}" var="track" rowKeyVar="rowNum">
       <rich:column>
       <f:facet name="header">
       <h:outputText value=""/>
       </f:facet>
      
       <h:panelGrid columns="2">
       <h:outputLabel value="Title" styleClass="required"/>
       <h:inputText value="#{track.title}" size="50" maxlength="50" required="true">
       <f:validateLength maximum="50"/>
       <a4j:support event="onkeyup" ajaxSingle="true"/>
       </h:inputText>
       <!-- OTHER TRACK-CODE HERE -->
       </h:panelGrid>
      
       <h:panelGrid columns="2">
       <h:outputLabel for="extract" value="Extract"/>
       <h:panelGrid id="extract" columns="2">
       <rich:fileUpload fileUploadListener="#{track.extractUploadListener}" acceptedTypes="mp3" immediateUpload="true" listHeight="55px">
       <a4j:support event="onuploadcomplete" reRender="extract"/>
       </rich:fileUpload>
      
       <h:panelGroup rendered="#{track.extractUrl != null}">
       <dew:player value="#{track.extractUrl}" showtime="true"/>
       <h:outputLink value="#{track.extractUrl}"/>
       <a4j:commandButton actionListener="#{track.doDeleteExtract}" value="Delete" reRender="extract" ajaxSingle="true"/>
       </h:panelGroup>
       </h:panelGrid>
      
       <!-- OTHER TRACK CODE HERE -->
       </h:panelGrid>
      
       <f:facet name="footer">
       <h:outputText value=""/>
       </f:facet>
       </rich:column>
      
       <rich:column>
       <f:facet name="header">
       <h:panelGroup>
       <h:graphicImage value="/images/icons/edit_add.png"/>
       <h:graphicImage value="/images/icons/edit_remove.png"/>
       </h:panelGroup>
       </f:facet>
      
       <a4j:commandButton image="/images/icons/edit_remove.png" actionListener="#{releaseEdit.doRemoveTrack}" reRender="trackTable" ajaxSingle="true"/>
      
       <f:facet name="footer">
       <a4j:commandButton image="/images/icons/edit_add.png" actionListener="#{releaseEdit.doAddTrack}" reRender="trackTable" ajaxSingle="true"/>
       </f:facet>
      
       </rich:column>
       </rich:dataTable>
       </rich:simpleTogglePanel>
      
       <!-- SUBMIT / CANCEL / DELETE CODE HERE -->
      </h:form>


      When an upload is complete on some track (that is some row of that dataTable), I would like to reRender thhat row, so as to display a little flash player that enables to listen to the extract, and a button to delete the extract. The player and the button are conditionally rendered.

      To perfoorm the refresh, I wrote this line, like on the demo:
      <a4j:support event="onuploadcomplete" reRender="extract"/>


      "extract" is the dataTable row id as you can see. However that doesn't reRender, and the result is the fileUpload component ends up with its buttons disabled. The only workaround is to reRender the whole dataTable. There, it works perfectly.

      As you can see, there is also a "delete buton", that removes the extract completely. It also has reRender="extract".
      <a4j:commandButton actionListener="#{track.doDeleteExtract}" value="Delete" reRender="extract" ajaxSingle="true"/>

      And this time, it works !

      What we have here is 2 components next to each other dehaving differently on the same event. So my guess is that something is wrong with reRenders for fileUploads in dataTables. Do you confirm ?