JSF和Jquery-如何定位在ajax調用後呈現的元素

Question

我有一個包含p：fileUpload組件以及h：graphicImage組件的表單。只有在通過AJAX上傳文件後纔會呈現h：graphicImage組件。

我的問題是，我需要在文件上傳後執行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作爲前綴。所以，你可以檢查元素，並使用這種方式：在阿賈克斯完成事件的回調的參數是event, xhr, settings

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

這裏。