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

Question

我对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（包括所有图像），这对用户不友好。您对我的问题有任何想法吗？

问候

Answer 1

如果不使用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。