Не могу «скрыть» rich: fileUpload

Question

Im пытается создать страницу с богатыми: fileUpload, чтобы (удивительно) загрузить изображение после завершения загрузки. Я хочу «скрыть» компонент rich: fileUpload и отобразить jQuery плагин jCrop, чтобы изображение можно обрезать перед сохранением. как только изображение будет сохранено из выбранного урожая, два компонента должны снова переключить их видимость.

Однако, похоже, я не могу получить богатых: fileUpload, чтобы «скрыть». компонент jCrop отображается отлично, как и функция jCrop. но независимо от того, что я пытаюсь использовать rich: fileUpload все еще отображается на экране. На самом деле, если я добавлю rendered="#{!uploadAndCrop.newImage}" на страницу rich: panel, в которой находится rich: fileUpload, ничего не обновляется. Мне нужно удалить это для отображения компонента jCrop.

Мой код ниже, он немного грязный, поскольку ive попробовал так много разных вещей. Был бы чрезвычайно благодарен, если бы кто-то мог указать мне в правильном направлении, или посоветовать лучший способ сделать это.

Благодаря

<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 метод, но вы можете просто использовать логическое значение и устанавливает его ложным на fileUploadListener.

Но перепишите <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> 

Bean:

Boolean fileUpRendered; 

(...) 

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

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

} 

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