如何在 PrimeFaces 中通过 JavaScript 触发组件刷新？

Question

是否可以从 javascript 更新 PrimeFaces 组件，以便强制刷新？

我正在使用对话框中的此按钮进行 ajax 保存调用。 我已在 oncomplete 事件上附加了我的自定义 JavaScript。

<p:growl life="1500" id="showmessage"/>
<p:dialog id="addMemberDialog" widgetVar="addMemberDlg">
    <!-- More Code -->
    <p:commandButton value="Save"
        actionListener="#{memberManagedBean.save}"
        oncomplete="handleSaveNewMember(xhr, status, args)"
        update=":memberListForm:membersTable createupdateform "
        process="@form" />
</p:dialog>

..在保存按钮期间，我在此处添加一条消息，以使用咆哮组件将其显示给客户端。

public void save(ActionEvent event) {
    FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO,
            "Successfuly Add user", "Successfuly Add user");
    FacesContext.getCurrentInstance().addMessage(null, message);

}

我的问题是，如何对 UI 进行排序，以便在咆哮组件显示消息之前我应该先隐藏对话框？

function handleSaveNewMember(xhr, status, args) {
    addMemberDlg.hide();
    //update the growl after the dialog was hidden?
}

发生的事情是咆哮组件与对话框同时显示。

谢谢。

Answer 1

您可以使用 PrimeFaces 的

<p:remoteCommand>

为此。

<p:remoteCommand name="updateGrowl" update="showmessage" />

将被调用为

<p:commandButton ... oncomplete="addMemberDlg.hide(); updateGrowl();" />

---

在这种特殊情况，还有一种更简单的方法。将

autoUpdate

的

<p:growl>

属性设置为

true

。

<p:growl autoUpdate="true" life="1500" id="showmessage"/>

它会根据每个 ajax 请求自动更新。如果您的组件实际上不支持它，那么您始终可以将其包装在也支持该属性的

<p:outputPanel>

中。

<p:outputPanel autoUpdate="true">
    ...
</p:outputPanel>

Answer 2

您始终可以执行类似的操作（从保存按钮更新属性中删除 showmessage id）

<h:commandButton style="display:none" id="myBtn" >
    <f:ajax render=":showmessage"/>
</h:commandButton>

function handleSaveNewMember(xhr, status, args) {
    ...
    jQuery("#myBtn").click();
}

编辑 但无论如何，在您当前的代码中，对话框不是在更新 grwol 的同时关闭的吗？

Answer 3

我的建议：

1. 将

   <p:remoteCommand>

   与

   actionListener

   属性一起使用。此属性调用包含

   FacesContext.addMessage

   代码的支持 bean 方法，如下所示：

   <p:remoteCommand actionListener="myBean.testMethod()" />

2. 接下来，在

   handleSaveNewMember

   脚本中，在

   remoteCommand

   之后调用

   name

   addMemberDlg.hide();

   属性，如下所示：

   <p:remoteCommand name="testScript" actionListener="myBean.testMethod()"/>

   。然后，

   function handleSaveNewMember(xhr, status, args) { addMemberDlg.hide(); testScript(); }

3. 向

   update

   指向咆哮组件添加

   remoteCommand

   属性：

   <p:remoteCommand name="testScript" actionListener="myBean.testMethod()" update="showmessage" />

4. 你的

   commandButton

   没问题。

这对我有用。

问候。

Answer 4

PrimeFaces 有一个 Ajax API。您可以使用

PrimeFaces.ajax.Request.handle(cfg)

或较短版本

PrimeFaces.ab(cfg)

通过使用配置对象的

update

属性来触发更新。

您可能希望根据需要设置

process

属性。如果您不需要处理任何内容，请将其设置为

@none

。

然后，您需要设置

source

属性。您可以使用 EL 将其设置为当前组件：

#{component.clientId}

。

将这些放在一起，你会得到：

PrimeFaces.ab({source:'#{component.clientId}',process:'@none',update:'clientIdToUpdate'})

我创建了一个自定义 EL 函数，将其减少为

#{my:ajaxUpdate('clientIdToUpdate')}

：

public static String ajaxUpdate(final String clientIds) {
  return "PrimeFaces.ab({source:'"
                 + UIComponent.getCurrentComponent(Faces.getContext()).getClientId()
                 + "',process:'@none',update:'"
                 + clientIds
                 + "'})";
}

这减少了（例如）：

<p:remoteCommand name="updateMyComponent" update="myComponent"/>
...
<p:ajax event="filter" oncomplete="updateMyComponent()"/>

至：

<p:ajax event="filter" oncomplete="#{my:ajaxUpdate('myComponent')}"/>

Answer 5

为什么不能把 p:Dialog 放在 < h:panelGroup > 里面。喜欢

< h:panelGroup id="addUser" rendered = "boolean value " >
    < p:dialog id="addMemberDialog" widgetVar="addMemberDlg" >
        <!-- More Code -->
        < p:commandButton value="Save" actionListener="#{memberManagedBean.createOrUpdate}"
                oncomplete="handleSaveNewMember(xhr, status, args)"
                update=":memberListForm:membersTable createupdateform :showmessage :addUser"
                process="@form" />
    < /p:dialog >
< /h:panelGroup>

应在保存方法中设置的布尔值。在保存方法中将其设置为 false 时，它在更新时不会显示。因此，只会显示咆哮消息。但在调用此保存方法之前，将此布尔值设置为 true。

Answer 6

您可以使用名为 p:remotecommand 的 PrimeFaces 元素。该元素将执行一个操作（例如，调用 bean 方法）并在该操作之后执行更新。

这篇文章中有一个例子http://devdublog.blogspot.com/2015/04/best-way-for-calling-method-of.html.