jsf - 如何使用 h :commandLink to update and open a p:dialog without reloading other components

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，则在单击命令链接时将重新呈现整个页面。您可能希望将 h:commandLink 替换为 p:commandLink这为您提供开箱即用的 Ajax。然后，您希望在单击该按钮时重新呈现对话框(以便包含正确的图像)并使用 oncomplete 属性从客户端简单地显示对话框:

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

请注意，您 choose the right bean scope 很重要. Ajax 不能与 @RequestScoped beans 一起工作。您可能想使用 @ViewScoped。