Primefaces update component after dialog close event

Question

I open a Dialog using Primefaces dialog framework

RequestContext.getCurrentInstance().openDialog("myDialog", options, null);

Then, I want to update a component in the base page after the dialog's close event. I know we could add a 'dialogReturn' ajax event

<p:ajax event="dialogReturn" update = ":form:colors"  />

But how to do this programmatically using the dialog framework?

Have the same problem.. how to pass the ajax stuff to the openDialog()-Method — Kevin Busch, Mar 08 '17 at 10:10

Neo · Answer 1 · 2018-06-13T08:49:33.187

Workaround:

assign the action to open the dialog to a button; with javascript call the click() method of that button and assign a dialogReturn to it:

public void openDialogWithJS(){
            RequestContext.getCurrentInstance().execute("$('#myForm\\\\:myButton').click()");
    }



public void showDialog(){
    RequestContext.getCurrentInstance().openDialog("myDialog", options, null);
}

<h:form id="myForm">
                <p:commandButton id="myButton" actionListener="#{myBean.showDialog}" style="display: none;">
                    <p:ajax event="dialogReturn"  update = "myComponentId"/>
                </p:commandButton>
</h:form>

There is this thing called `p:remoteCommand`. No need to abuse a hidden button. — Kukeltje, Jun 13 '18 at 08:09

Eufránio Diogo · Answer 2 · 2022-12-23T19:48:23.177

hope that my answer could help.

[Important] Scenario

First, I define an XHTML page (my dialog) to show products that are not in showcase of our shop and we can add products by this dialog, and in another hand, we have a page that presents all products already on the showcase, and we need to update it automatically, after close the dialog.

First, we create the main page that shows products already on the case, like:

File showcase.xhtml

<h:form>
      <p:commandButton
            style="background-color: #007fff"
            action="#{showCaseBean.addProductToShowCase()}"
            value="Add Product"
            >
            <p:ajax
                event="dialogReturn" 
                listener="#{showCaseBean.afterCloseDialog}" 
                update="equipe-table"
                />
        </p:commandButton>

   <p:dataTable
        id="product-table"
        value="#{showCaseBean.productsInShowCase}"
        var="product">

        <p:column
            headerText="ID">
            #{product.id}
        </p:column>
        <p:column
            headerText="Name">
            #{product.name}
        </p:column>
        <p:column
            headerText="Price"
            >
            #{product.price}
        </p:column>
    </p:dataTable>



   </h:form>

The most important fragment of this page is:

<p:commandButton
   style="background-color: #007fff"
   action="#{showCaseBean.addProductToShowCase()}"
   value="Add Product"
   >
   <p:ajax
      event="dialogReturn" 
      listener="#{showCaseBean.afterCloseDialog}" 
      update="product-table"
      />
</p:commandButton>

This part of the code has two main, first: open the dialog by the method showCaseBean.addProductToShowCase() and make an ajax call after close the dialog, and the method to be executed is showCaseBean.afterCloseDialog(SelectEvent)

My showCaseBean.java:

@Named(value = "showCaseBean")
@ViewScoped
public class ShowCaseBean implements Serializable {
...

    @PostConstruct
    public void init() {
        this.productsInShowCase = productsFacade.findAllProductsInShowCase(); // ProductsFacade is a class that has contact with DB and the method return List<Product>
    }

public void addProductToShowCase() {
        Map<String, Object> options = new HashMap<String, Object>();
        options.put("modal", true);
        options.put("width", 640);
        options.put("height", 340);

        PrimeFaces.current().dialog().openDynamic("/add_product_to_showcase_dialog", options, null);
    }

    // Method to execute after dialog closed, to get one more time the products
    public void afterCloseDialog(SelectEvent event) {
        this.productsInShowCase = productsFacade.findAllProductsInShowCase();
    }

}

add_product_to_showcase_dialog.xhtml has all products that are not in ShowCase and we add it.

<h:body>
    <h:form>

        <p:dataTable
            id="tecnicos-tabela"
            value="#{addProductToShowCaseDialogBean.productsNotInShowCase}"
            var="product">

            <p:column
                headerText="ID">
                #{product.pkProduct}
            </p:column>
            <p:column
                headerText="Name">
                #{product.name}
            </p:column>
            <p:column
                headerText="Price"
                >
               #{product.price}
            </p:column>
            <p:column
                headerText="Actions"
                >
               <p:commandButton
                    style="background-color: #5c5c5c"
                    action="#{addProductToShowCaseDialogBean.add(product)}"
                    value="Add"
                    >
                </p:commandButton>
            </p:column>
        </p:dataTable>

        <p:commandButton 
           value="Close" 
           style="background-color: #e63535; color: #fefefe; font-weight: bold;" 
           action="#{addProductToShowCaseDialogBean.closeDialog()}"/>
    </h:form>
</h:body>

The most critical part right here is the button that closes our form, other parts are only contextual and not critical at all

<p:commandButton 
   value="Close" 
   style="background-color: #e63535; color: #fefefe; font-weight: bold;"
   action="#{addProductToShowCaseDialogBean.closeDialog()}"/>

Where we simple close the dialog, through code in the bean.

Let's see the class AddProductToShowCaseDialogBean.java

@Named(value = "addProductToShowCaseDialogBean")
@ViewScoped
public class AddProductToShowCaseDialogBean implements Serializable {
...

    @PostConstruct
    public void init() {
        this.products = productsFacade.findAllProductsNotInShowCase();
    }

    public void closeDialog() {
        PrimeFaces.current().dialog().closeDynamic(this);
    }

}

After we click on the button and close our dialog, the ajax callback in ShowCaseBean is called and we reload the products on the showcase by the method afterCloseDialog and we update the table with the ID product-table

Those tutorials in PrimeFaces Doc helped me to solve the problem, you can check it also:

https://primefaces.github.io/primefaces/8_0/#/core/dialogframework https://www.primefaces.org/showcase-v8/ui/df/data.xhtml

Don't forget to upvote the answer, to help others if helped you

Primefaces update component after dialog close event

2 Answers2