我对JSF和Primefaces技术还很陌生,这就是为什么我在这里问这个问题。现在,我要展示一些产品。其中一项是。我想使该图像可单击,并在单击图像时在弹出窗口中更大地显示图像。请注意,图像存储在数据库中。
我已经尝试过类似的事情:
<h:commandLink id="imageBtn"
action="#{imageBean.showImg(_product.id)}">
<p:graphicImage id="product_thumbnail" styleClass="thumbnail"
cache="false"
value="#{imageBean.streamedImageById}">
<f:param name="productId" value="#{_product.id}" />
</p:graphicImage>
</h:commandLink>
...
<p:dialog id="imgDialog" header="Image in Bigger" widgetVar="imgDialog">
<p:graphicImage styleClass="thumbnail_large" cache="false"
value="#{imageBean.getImageById()}">
</p:graphicImage>
</p:dialog>
在我的ImageBean中:
public void showImg(Long id) {
this.currentProductId = id;
PrimeFaces.current().executeScript("PrimeFaces.widgets['imgDialog'].show();");
}
public StreamedContent getImageById() throws Exception {
if (currentProductId != null) {
..
}
}
图像是可单击的,并且可以正确显示弹出窗口,但是由于某些原因,单击后会刷新完整的dataTable(包括所有图像),这对用户不友好。您对我的问题有任何想法吗?
问候
如果不使用Ajax,则单击命令链接将重新呈现整个页面。您可能需要用h:commandLink
替换p:commandLink
,这使您可以立即使用Ajax。然后,您想在单击该按钮时重新渲染该对话框(以便包含正确的图像),并只需使用p:commandLink
属性从客户端显示该对话框即可:
oncomplete
[请注意,您<p:commandLink action="#{imageBean.setCurrentProductId(_product.id)}"
update="imgDialog"
oncomplete="PF('imgDialog').show()">
...
</p:commandLink>
很重要。 Ajax不适用于choose the right bean scope bean。您可能要使用@RequestScoped
。