JSF 和 Jquery- 如何定位在 ajax 调用后呈现的元素

Question

我有一个包含 p:fileUpload 组件和 h:graphicImage 组件的表单。 h:graphicImage 组件仅在文件通过 AJAX.

上传后呈现

我的问题是我需要在文件上传后执行 Jcrop（一个图像裁剪库），但是我需要执行 JCrop 的图像是通过 ajax 渲染的，所以没有'文档准备就绪时不存在

我有点像这样：

<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>

我该怎么做？

Answer 1

如果您有表单，则应将表单 ID 添加到元素中。在 JSF 中，表单中的元素以表单 ID 作为前缀。因此，您可以检查元素并以这种方式使用：

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

在回调的 ajax 完成事件中，参数是 event, xhr, settings。

JSF 和 Jquery- 如何定位在 ajax 调用后呈现的元素

JSF and Jquery- How to target an element that is rendered after an ajax call

jquery

jcrop

jsf-2.2