JSF и Jquery-Как настроить таргетинг на элемент, который отображается после вызова ajax

У меня есть форма, которая содержит компонент 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>

Как я могу это сделать?


jquery jcrop jsf-2.2
person Duran Wesley Harris    schedule 31.05.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если у вас есть форма, вы должны добавить идентификатор формы к элементу. В JSF элементы в форме получают идентификатор формы в качестве префикса. Итак, вы можете проверить элемент и использовать его следующим образом:

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

Здесь в событии завершения ajax в обратном вызове аргументы равны event, xhr, settings.

person Jai    schedule 31.05.2016
comment
Извините за использование. Я фактически использовал атрибут prependId=false в форме, чтобы он не добавлял идентификатор формы. Спасибо за решение! Я попробую и дам вам знать! - person Duran Wesley Harris; 31.05.2016