32

是否可以从 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?
}

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

谢谢。

4

6 回答 6

58

您可以为此使用 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>也支持该属性的 a 中。

<p:outputPanel autoUpdate="true">
    ...
</p:outputPanel>
于 2012-05-17T17:03:26.257 回答
5

你总是可以做这样的事情（从你的保存按钮更新属性中删除 showmessage id）

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

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

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

于 2012-05-17T09:38:17.053 回答
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的没问题。

这对我有用。

问候。

于 2014-02-07T20:07:28.413 回答
0

为什么不能将 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。

于 2012-05-17T09:43:39.703 回答
0

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

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

于 2015-04-23T16:47:39.803 回答
0

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')}"/>
于 2021-04-02T07:05:29.397 回答