Вызов функции JS автоматически после загрузки изображения компонентом поддержки Java - PullRequest
1 голос
/ 30 сентября 2019

Мне нужно, чтобы моя функция изменения размера JS вызывалась автоматически после того, как изображение возвращено компонентом поддержки Java. Это xhtml часть, ответственная за загрузку изображения. Он является частью dataGrid.

<p:panel id="panel1" >
    <p:graphicImage id="image1" value="#{imageService.image}"  width="100%" height="100%">
        <f:param name="id" value="#{kprod.id}" />
    </p:graphicImage>
</p:panel>

Это метод bean :

public StreamedContent getImage() throws IOException {
    FacesContext context = FacesContext.getCurrentInstance();

    if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE) {
        return new DefaultStreamedContent();
    }
    else {
        String id = context.getExternalContext().getRequestParameterMap().get("id");
        return findImage(Long.valueOf(id));
    }
}

После завершения фазы рендеринга он переходит в другую ветвь, которая возвращаетфактическое изображение.

У меня работает JS функция resizeImage(). Я проверил это, добавив атрибут onclick="resizeImage()" к <p:graphicImage>, а затем щелкнул по изображению, и оно изменило размер правильно. Теперь мне нужен автоматический вызов этой функции. <p:graphicImage> не имеет никаких атрибутов, которые я могу использовать. Я также попытался <p:ajax oncomplete="resizeImage()" /> включить в <p:graphicImage> узел, но каждый раз, когда я использую ajax, возвращается ошибка :

Не удается определить атрибут события: null

У меня тоже есть один подвопрос. Фактический идентификатор изображения в окончательном формате HTML равен contentForm:kprods:7:image1, где число является переменным в соответствии с порядком. Есть ли способ, как передать JS идентификатор элемента в качестве параметра?

Большое спасибо.

1 Ответ

1 голос
/ 01 октября 2019

Ну, я нашел решение. По сути, все, что мне было нужно - это запустить мою функцию при событии load Но элемент primefaces <p:graphicImage> не имеет атрибута onload .

Поэтому я добавил в свое новое пространство имен xhtml для атрибутов сквозного доступа:

xmlns:x="http://xmlns.jcp.org/jsf/passthrough".

И добавил x:onload атрибут к элементу graphicImage:

<p:panel id="panel1" >
    <p:graphicImage id="image1" value="#{imageService.image}" x:onload="resizeImage(this.id)" width="100%" height="100%">
        <f:param name="id" value="#{kprod.id}" />
    </p:graphicImage>
</p:panel>

Затем я проверил окончательный HTML-код, и был добавлен атрибут загрузки с моей функцией, добавленной к элементу <img>.

...