不能'隱藏'豐富：fileUpload

Question

我試圖創建一個頁面，使用rich：fileUpload，來（令人驚訝地）上傳圖像，一旦上傳完成我想隱藏rich：fileUpload組件並顯示jQuery插件jCrop使圖像在保存前可以被裁剪。一旦圖像從所選作物中保存，這兩個組件應該再次切換其可見性。

但是，我似乎不能得到富：fileUpload'隱藏'。 jCrop組件顯示正常，就像jCrop功能一樣。但無論我嘗試多麼豐富：fileUpload仍然顯示在屏幕上。實際上，如果我將rendered="#{!uploadAndCrop.newImage}"添加到rich：fileUpload所在的rich：面板中，似乎沒有更新。我必須刪除這個jCrop組件才能出現。

我的代碼如下，這是一個有點混亂，因爲我嘗試了很多不同的東西。如果有人能夠用正確的方向指出我的意見，或者建議採取更好的方式，我將非常感激。

感謝

<ui:define name="head"> 
    <link href="stylesheet/jquery.Jcrop.css" rel="stylesheet" 
     type="text/css" /> 

    <script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script> 
    <script type="text/javascript" src="scripts/jquery.Jcrop.js"></script> 

    <script language="Javascript">// <![CDATA[ // 
    {  
     var $J = jQuery.noConflict(); 
    } 
    //]]> //</script> 


</ui:define> 

<ui:define name="body"> 
    <h:form> 
     <h:panelGrid columns="2" columnClasses="top,top"> 

      <h:panelGroup id="uploadgroup"> 
       <a4j:outputPanel id="uploadpanel"> 
        <rich:panel rendered="#{!uploadAndCrop.newImage}"> 
         <rich:fileUpload fileUploadListener="#{uploadAndCrop.listener}" 
          maxFilesQuantity="#{uploadAndCrop.uploadsAvailable}" id="upload" 
          immediateUpload="#{uploadAndCrop.autoUpload}" 
          acceptedTypes="jpg, gif, png, bmp" 
          allowFlash="#{uploadAndCrop.useFlash}" listHeight="80px"> 
          <ui:remove> 
           onfileuploadcomplete="Richfaces.showModalPanel('croppanel');"> 
          </ui:remove> 
          <a4j:support event="onuploadcomplete" 
           reRender="info, uploadgroup, cropgroup" /> 
         </rich:fileUpload> 
         <h:outputText value="#{uploadAndCrop.newImage}" id="newimage" /> 
         <a onclick="Richfaces.showModalPanel('croppanel');" href="#">Show 
         ModalPanel</a> 
        </rich:panel> 
       </a4j:outputPanel> 
      </h:panelGroup> 



      <h:panelGroup id="info"> 
       <rich:panel bodyClass="info" rendered="#{!uploadAndCrop.newImage}"> 
        <f:facet name="header"> 
         <h:outputText value="Uploaded Image Preview" /> 
        </f:facet> 

        <rich:dataGrid columns="1" value="#{uploadAndCrop.files}" 
         var="file" rowKeyVar="row"> 
         <rich:panel bodyClass="rich-laguna-panel-no-header"> 
          <h:panelGrid columns="2"> 
           <a4j:mediaOutput element="img" mimeType="#{file.mime}" 
            createContent="#{uploadAndCrop.paint}" value="#{row}" 
            style="width:156x; height:71px;" cacheable="false"> 
            <f:param value="#{uploadAndCrop.timeStamp}" name="time" /> 
            <s:conversationId /> 
           </a4j:mediaOutput> 

          </h:panelGrid> 
         </rich:panel> 
        </rich:dataGrid> 
       </rich:panel> 
       <rich:spacer height="3" /> 
       <br /> 
       <a4j:commandButton action="#{uploadAndCrop.clearUploadData}" 
        reRender="info, upload" value="Clear Uploaded Image" /> 
      </h:panelGroup> 


      <h:panelGroup id="cropgroup"> 
       <rich:panel rendered="#{uploadAndCrop.newImage}"> 
        <f:facet name="header"> 
         <h:outputText value="Crop Image" /> 
        </f:facet> 
        <a4j:outputPanel id="crop" layout="inline"> 
         <rich:jQuery selector="#cropbox" timing="immediate" 
          query="Jcrop()" /> 
         <a4j:mediaOutput element="img" 
          mimeType="#{uploadAndCrop.tempImageStore.mime}" id="cropbox" 
          createContent="#{uploadAndCrop.paintCrop}" value="null" 
          style="width:312; height:142px;" cacheable="false"> 
          <f:param value="#{uploadAndCrop.timeStamp}" name="time" /> 
          <s:conversationId /> 
         </a4j:mediaOutput> 
         <rich:spacer height="3" /> 
         <br /> 
         <a4j:commandButton action="#{uploadAndCrop.clearUploadData}" 
          reRender="info, upload" value="Crop" /> 
        </a4j:outputPanel> 
       </rich:panel> 
      </h:panelGroup> 


     </h:panelGrid> 

     <h:commandButton id="save" value="Save" 
      action="#{uploadAndCrop.save}"> 
      <f:param name="cmsCompanyIdCom" value="" /> 
     </h:commandButton> 
     <s:button id="cancelEdit" value="Cancel" propagation="end" 
      view="/CmsCompany.xhtml"> 
      <f:param name="cmsCompanyIdCom" value="" /> 
     </s:button> 
    </h:form> 

    <ui:remove> 
     <rich:modalPanel id="croppanel" width="350" height="240"> 
      <f:facet name="header"> 
       <h:panelGroup> 
        <h:outputText value="Crop Image"></h:outputText> 
       </h:panelGroup> 
      </f:facet> 
      <f:facet name="image"> 
       <ui:remove> 
        <h:panelGroup> 
         <h:outputText value="close" /> 
         <rich:componentControl for="croppanel" attachTo="close" 
          operation="hide" event="onclick" /> 
        </h:panelGroup> 
       </ui:remove> 
      </f:facet> 

      <rich:panel rendered="#{uploadAndCrop.newImage}"> 
       <ui:remove> 
        <f:facet name="header"> 
         <h:outputText value="Crop Image" /> 
        </f:facet> 
       </ui:remove> 
       <a4j:outputPanel id="crop" layout="inline"> 

        <a4j:mediaOutput element="img" 
         mimeType="#{uploadAndCrop.tempImageStore.mime}" id="cropbox" 
         createContent="#{uploadAndCrop.paintCrop}" value="null" 
         style="width:312; height:142px;" cacheable="false"> 
         <f:param value="#{uploadAndCrop.timeStamp}" name="time" /> 
         <s:conversationId /> 
        </a4j:mediaOutput> 


        <ui:remove> 
         <rich:spacer height="3" /> 
         <br /> 
         <a4j:commandButton action="#{uploadAndCrop.clearUploadData}" 
          reRender="info, upload" value="Crop" /> 
        </ui:remove> 
       </a4j:outputPanel> 
      </rich:panel> 

      <a onclick="Richfaces.hideModalPanel('croppanel');" href="#">Hide 
      ModalPanel</a> 
     </rich:modalPanel> 
    </ui:remove> 

</ui:define> 

Answer 1

我不知道如何爲你的uploadAndCrop.newImage方法，但你可以只使用一個布爾值，並將其設置爲false在fileUploadListener。

但reRender的<a4j:outputPanel id="uploadpanel">，而不是<rich:fileUpload>或組。

<a4j:outputPanel id="uploadpanel" rendered="#{bean.fileUpRendered}"> 
    (...) 

    <rich:fileUpload... 
     <a4j:support event="onuploadcomplete" 
          reRender="info, uploadpanel, cropgroup" /> 
    </rich:fileUpload> 

    (...) 
</a4j:outputPanel> 

豆：

Boolean fileUpRendered; 

(...) 

public void listener(UploadEvent event) throws Exception { 
    try { 
     (...) 

     fileUpRendered = false; 
    catch (...) { (...) } 

} 

//Get set 
public get/set fileUpRendered() { }...