0

I have a form that contains a p:fileUpload component as well as an h:graphicImage component. The h:graphicImage component is only rendered once the file has been uploaded via AJAX.

My problem is that I need to execute Jcrop(an image-cropping library) after the file has been uploaded, but the image that I need to execute JCrop on is rendered via ajax and so doesn't exist at when the document is ready

I have something vaguely like this:

<form>
  <p:fileUpload fileUploadListener="#{personController.uploadFile}" />
  <h:graphicImage id="profilePicture" value="images/#{personController.uploadedFile}" rendered="#{personController.fileUploaded}" />
</form>

<script type="text/javascript">
 $(function() {  
     //Wont get called due to partial page refresh 
     $('#profilePicture').JCrop()
 })
</script>

How can I do this?

Duran Wesley Harris
  • 612
  • 7
  • 18

1 Answers1

1

If you have a form then you should add the form ID to the element. In JSF the elements in form gets a form's ID as a prefix. So, you can inspect the element and use this way: 

 $(document).ajaxComplete(function ( e, x, s){
    if(s.url === 'uploadurl'){
         $('#formID\\:profilePicture').JCrop();
    }
 });

Here in the ajax complete event in the callback the arguments are event, xhr, settings.

Jai
  • 74,255
  • 12
  • 74
  • 103
  • Sorry use I actually used the prependId="false" attribute on the form so that it doesn't prepend the form id. Thanks for the solution ! I will try it out and let you know! – Duran Wesley Harris May 31 '16 at 06:11