如何使用h:commandLink在不重新加载其他组件的情况下更新和打开p:对话框

Question

我有一个<p:datable>来显示一些产品项。其中一个项目是<p:graphicImage>。我想让这个图像可以点击，并在点击图像时在弹出窗口中显示更大的图像。请注意，这些图像存储在数据库中。

我试过这样的东西：

<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) {
..
}
}

图像是可点击的，并正确显示弹出窗口，但由于某些原因，点击后会刷新完整的数据表(包括所有图像(，这对用户不友好。你知道我的问题吗？

Answer 1

如果您不使用Ajax，如果您单击命令链接，整个页面将被重新绘制。您可能希望用p:commandLink替换h:commandLink，这将为您提供开箱即用的Ajax。然后，您希望在单击该按钮时重新发送对话框(以便包含正确的图像(，并使用oncomplete属性从客户端简单地显示对话框：

<p:commandLink action="#{imageBean.setCurrentProductId(_product.id)}"
update="imgDialog"
oncomplete="PF('imgDialog').show()">
...
</p:commandLink>

请注意，选择正确的bean作用域非常重要。Ajax将无法使用@RequestScopedbean。您可能想要使用@ViewScoped。