在对话框关闭事件后，Primefaces更新组件

Question

我使用Primefaces对话框框架打开一个对话框

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

然后，我想在对话框的关闭事件之后更新基页中的一个组件。我知道我们可以添加一个"dialogReturn"ajax事件

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

但是如何使用对话框框架以编程方式实现这一点呢？

Answer 1

解决方法：

将打开对话框的操作分配给按钮；使用javascript调用该按钮的click（）方法并为其分配一个对话框返回：

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>

Answer 2

希望我的回答能有所帮助。

[重要]场景

首先，我定义了一个XHTML页面（我的对话框）来显示不在我们商店展示区的产品，我们可以通过这个对话框添加产品。另一方面，我们有一个页面来显示已经在展示区上的所有产品，我们需要在关闭对话框后自动更新它。

首先，我们创建一个主页，显示案例中已经存在的产品，如：

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

这个页面最重要的片段是：

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

这部分代码有两个主要部分，第一：用方法showCaseBean.addProductToShowCase()打开对话框，关闭对话框后进行ajax调用，执行的方法是showCaseBean.afterCloseDialog(SelectEvent)

我的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有ShowCase中没有的所有产品，我们添加了它。

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

这里最关键的部分是关闭我们表单的按钮，其他部分只是上下文的，根本不是关键的

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

在这里，我们通过bean中的代码简单地关闭对话框。

让我们看看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);
    }
}

单击按钮并关闭对话框后，调用ShowCaseBean中的ajax回调，我们在CloseDialog之后通过方法重载showcase上的产品，并使用ID产品表更新表

PrimeFaces Doc中的那些教程帮助我解决了这个问题，你也可以查看：

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

不要忘记对答案投赞成票，如果帮助了你，就帮助别人