How to use h:commandLink to update and open a p:dialog without reloading other components

Question

I have a <p:datable> to display some products items. One of the item is a <p:graphicImage>. I would like to make this image clickable and display image in bigger in a popup when the image is clicked. Note that the images are stored in a database.

I've tried something like that:

<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>

in my ImageBean:

public void showImg(Long id) {
    this.currentProductId = id;
    PrimeFaces.current().executeScript("PrimeFaces.widgets['imgDialog'].show();");
}

public StreamedContent getImageById() throws Exception {    
    if (currentProductId != null) {
        ..
    }
}

The image is clickable and popup correctly displayed, but for some reasons the full data table is refreshed (including all the images) after clicking, which is not user-friendly. Do you have any idea about my problem?

Answer 1

If you are not using Ajax, your entire page will be rerendered if you click a command link. You might want to replace your h:commandLink with a p:commandLink which gives you Ajax out of the box. Then, you want to rerender the dialog when that button is clicked (in order to contain the correct image) and simply show the dialog from the client side using the oncomplete attribute:

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

Please note that it's important that you choose the right bean scope. Ajax will not work with @RequestScoped beans. You probably want to use @ViewScoped.