Selector @(:...) return JS error on fileupload update

[Parche_]

Hi, I'm getting a JS error when I try updating a component using JQuery Selector , the same selector works right on commandButton.

I just try @all selector which complete the loading bar, file is uploaded but fileupload component isn't refreshed so loading var still stay visible instead @form do it all but not update the form which must be hidden because flag is false.

I'm using PF 5, firefox 33 and glassfish 4.


JS error

Code: Select all

Error: Error: Syntax error, unrecognized expression: unsupported pseudo: saveCropImgContainer
Source File: http://localhost:8080/aio/spring/javax.faces.resource/jquery/jquery.js?ln=primefaces&v=5.0
Line: 25

XHTML code

Code: Select all

<h:panelGroup layout="block" id="addSpaceImgContainer"  styleClass="addSpaceImgContainer">
<h:form id="uploadForm" rendered="#{pictureProvider.flagPicture}" enctype="multipart/form-data" prependId="false">
							<p:fileUpload allowTypes="/(\.|\/)(jpe?g)$/" cancelLabel="#{msg['upload.cancel.msg']}" dragDropSupport="true" fileLimit="1"
								fileLimitMessage="#{msg['upload.filelimit.msg']}" fileUploadListener="#{pictureProvider.handFile}" 
								invalidFileMessage="#{msg['upload.invalidfile.msg']}" invalidSizeMessage="#{msg['upload.invalidsize.msg']}" 
								label="#{msg['upload.label.msg']}" sizeLimit="5242880" mode="advanced" uploadLabel="#{msg['upload.upload.msg']}"
								update="@(:saveCropImgContainer)" />
					
						<h:panelGroup layout="block" id="previewPictureContainer" rendered="#{selectedSpace.img or pictureProvider.flagPreviewPicture}" styleClass="previewPictureContainer">
							<h:outputText value="#{msg['configuration1.preview.msg']}" />
							
							<p:graphicImage value="#{request.requestURL.substring(0, request.requestURL.length() - request.requestURI.length())}#{request.contextPath}/images/#{selectedSpace.idSpace}/coverPicture.jpeg" />
							
							<h:commandButton action="recrop" value="#{msg['reuse.btn']}" alt="#{msg['reuse.btn.alt']}" title="#{msg['reuse.btn.title']}" accesskey="4" />
						</h:panelGroup>
					</h:form>
				</h:panelGroup>
				
				<h:panelGroup  layout="block" id="cropperSpaceImgContainer" styleClass="cropperSpaceImgContainer">
					<h:form id="cropperForm" rendered="#{pictureProvider.flagCropper}" prependId="false">
						<h:panelGroup layout="block" id="preRenderSpaceImgContainer" styleClass="preRenderSpaceImgContainer">
							<p:imageCropper value="#{pictureProvider.croppedImage}" image="#{request.requestURL.substring(0, request.requestURL.length() - request.requestURI.length())}#{request.contextPath}/images/#{selectedSpace.idSpace}/coverPicture.jpeg" alt="#{msg['cropper.picture.msg']}" />
							
						</h:panelGroup>
						
						<h:panelGroup layout="block" id="croppedButtonsContainer" styleClass="croppedButtonsContainer">
							<p:commandButton update="@(:saveCropImgContainer)" value="#{msg['crop.btn']}" action="#{pictureProvider.crop}"  icon="ui-icon-scissors"/>						
						</h:panelGroup>
					</h:form>
				</h:panelGroup>

Thanks!

[tandraschko]

@(:saveCropImgContainer)

is not a valid jquery selector. CHeck the jquery docu.

[Parche_]

I thought JSF separator char replaced JQuery id selector. The behavior on commandbutton was correct because if I set update="..." the view was being reload automatically instead if I don't set any update="..." the view stay in the same state and JS error message is visible.

So I've replaced every to @all but component aren't updated on first upload (file is upload and loading var stay full and visible) and I need to press f5 to see new components. Second time and so behavior is right and I can do a cycle proccess

Upload=>Crop=>See cropped image =>Upload new image
=> Crop the image again

Hav you got any idea for this?

Thank you vry much for you last reply!

[tandraschko]

everything inside @() is a plain jquery selector!
Just set a correct update attr and it should work.