Question

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

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

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

..在保存按钮期间，我在这里添加一条消息，使用growl组件将其显示给客户端。

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

}

我的问题是，如何对UI进行排序，我应该在growl组件显示meesage之前先隐藏对话框？

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

正在发生的事情是，growl组件同时显示在对话框旁边。

感谢。

Answer 1

您可以使用PrimeFaces'<p:remoteCommand>进行此操作。

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

将被调用为

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

在这个特例中，有一种更简单的方法。将autoUpdate的{{1}}属性设置为<p:growl>。

true

它会在每个ajax请求上自动更新。如果你的组件实际上不支持它，那么你总是可以将它包装在同样支持该属性的<p:growl autoUpdate="true" life="1500" id="showmessage"/>中。

<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

我的建议：

使用<p:remoteCommand>属性actionListener。此属性以这种方式调用包含FacesContext.addMessage代码的辅助bean方法：<p:remoteCommand actionListener="myBean.testMethod()" />
接下来，在handleSaveNewMember脚本中，remoteCommand以name方式调用addMemberDlg.hide(); <p:remoteCommand name="testScript" actionListener="myBean.testMethod()"/>属性：function handleSaveNewMember(xhr, status, args) { addMemberDlg.hide(); testScript(); }。然后，update
将remoteCommand属性添加到<p:remoteCommand name="testScript" actionListener="myBean.testMethod()" update="showmessage" />指向growl组件：commandButton
您的{{1}}没问题。

这对我有用。

问候。

Answer 4

为什么你不能把p：Dialog放在＆lt; h：panelGroup＆gt;。喜欢

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

应该在save方法中设置的布尔值。如果在保存方法中将其设置为false，则在更新时不会显示。因此，仅显示咆哮信息。但在调用此save方法之前，此布尔值设置为true。

Answer 5

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

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

Answer 6

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'})

我创建了一个 custom EL function 以将其减少到 #{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')}"/>

如何在primefaces中从javascript触发组件刷新？

6 个答案: