Как использовать h: commandLink для обновления и открытия диалога ap: без перезагрузки других компонентов

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>

Обратите внимание, что важно, чтобы вы выбрали правильный объем боба . Ajax не будет работать с @RequestScoped bean-компонентами. Вы, вероятно, хотите использовать @ViewScoped.