时间戳

首页 > 解决方案 > java backing bean加载图片后自动调用JS函数

javascript - java backing bean加载图片后自动调用JS函数

问题描述

java backing bean返回图像后，我需要JS自动调用我的调整大小函数。这是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));
    }
}

完成渲染阶段后，它会转到返回实际图像的 else 分支。

我有工作JS功能resizeImage()。我通过添加属性onclick="resizeImage()"来测试它<p:graphicImage>，然后单击图像并正确调整大小。我现在需要的是自动调用这个函数。 <p:graphicImage>没有任何我可以使用的属性。我也尝试过<p:ajax oncomplete="resizeImage()" />参与<p:graphicImage>节点，但每次使用时都会返回ajax此错误：

无法确定事件属性：null

我还有一个子问题。final 中的实际图像 IDHTML是contentForm:kprods:7:image1数字根据顺序可变的位置。有没有办法如何将JS元素的 id 作为参数传递？

非常感谢。

标签： javascriptjavaprimefacesxhtml

解决方案

好吧，我找到了解决方案。基本上我只需要在加载事件上运行我的函数。但是 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>元素中有 onload 属性。

推荐阅读