Cannot 'hide' rich:fileUpload
Im trying to create a page that uses the rich:fileUpload, to (surprisingly) upload and image, once the upload is completed I want to 'hide' the rish:fileUpload component and display the jQuery plugin jCrop so that the image can be cropped before saving. once the image is saved from the crop selected, the two components should toggle their viewability again.
However, I dont appear to be able to get the rich:fileUpload to 'hide'. the jCrop component displays fine, as does the jCrop functionality. but no matter what I try rich:fileUpload is still displayed on the screen. Actually if I add rendered="#{!uploadAndCrop.newImage}" to the rich:panel that the rich:fileUpload is in, nothing seems to update.
My code is below, it is a little messy as ive tried so many different things. Would be extremely grateful if someone could point me in the right direction with this, or advise a better way of doing it.
Thanks
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:s="http://jboss.com/products/seam/taglib"
template="layout/template.xhtml">
<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>
</ui:composition>