How to open a page in PrimeFaces lightbox, when a command button is clicked?

jsf, jsf-2.2, primefaces

Solution

This doesn't seem to be officially supported. So you need a hack/trick.

Based on the `PrimeFaces.widget.LightBox` definition in `lightbox.js`, the lightbox uses the `href` of the first `<a>` element as `src` of the `<iframe>`.

setupIframe: function () {
    // ...
    this.links.click(function (b) {
        if (!a.iframeLoaded) {
            // ...
            a.iframe.on("load", function () {
                // ...
            }).attr("src", a.links.eq(0).attr("href")) // <-- Here.

So, it should suffice to just put an invisible link (just apply CSS `display:none`) in the `<p:lightbox>` next to the `<p:commandButton>`.

<p:lightBox iframe="true" height="90%" width="800px" widgetVar="lightBoxWidget">
    <h:outputLink value="page.jsf" style="display:none;">
        <f:param name="id" value="#{bean.id}"/>
    </h:outputLink>
    <p:commandButton value="Text" update="..." />
</p:lightBox>

Make sure that the `<p:commandButton update>` doesn't cover the `<p:lightBox>` itself, or it may fail.

Problem

This example on PrimeFaces showcase demonstrates the usage of `<p:lightBox>` (iFrame). A page is opened, when an `<h:outputLink>` is clicked. I want the same, when a `<p:commandButton>` is clicked. A page should be opened in `<p:lightBox>`, when a `<p:commandButton>` is pressed. I have the following. ``` <p:lightBox iframe="true" height="90%" width="800px" widgetVar="lightBoxWidget"> <h:outputLink value="page.jsf" style="width: 93%; text-align: left;text-align: left; height: 22px;padding: 6px 0px 0px 12px;" styleClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onmouseover="$(this).addClass('ui-state-hover');" onmouseout="$(this).removeClass('ui-state-hover');"> <h:outputText value="Text"/> <f:param name="id" value="#{bean.id}"/> </h:outputLink> </p:lightBox> ``` How can I replace `<h:outputLink>` by `<p:commandButton>`? The style used here is just to make a link look like a button. Actually I want to update a `<p:dataTable>` before `<p:lightBox>` is opened so that selected rows can be set to an associated managed bean. For this to be so, a `<p:commandButton>` is well-suited instead of `<h:outputLink>`.

Original source