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

问题描述 投票:1回答:1

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

问候

jsf primefaces
1个回答
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

© www.soinside.com 2019 - 2024. All rights reserved.