如何使用 h:commandLink 更新和打开 p:dialog 而无需重新加载其他组件答案

【问题标题】：How to use h:commandLink to update and open a p:dialog without reloading other components如何使用 h:commandLink 更新和打开 p:dialog 而无需重新加载其他组件
【发布时间】：2020-02-27 11:59:48
【问题描述】：

我有一个<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) {
        ..
    }
}

图片可点击并正确显示，但由于某些原因，点击后刷新了完整的数据表（包括所有图片），不友好。你知道我的问题吗？

【问题讨论】：

您的“谢谢它有效”评论可能已被删除，因为它离题了。另见stackoverflow.com/help/someone-answers

标签： jsf primefaces

【解决方案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 bean。您可能想使用@ViewScoped。

【讨论】：