如何從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> 

..during保存按鈕，我在這裏添加消息來將其顯示給用咆哮組件客戶端。

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

} 

我的問題是，我怎麼能測序UI這樣，我應該先躲前咆哮組件可以顯示meesage對話？

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

發生什麼事情是，咆哮組件同時顯示在對話框旁邊。

謝謝。

Answer 1

你總是可以做這樣的事情（從您的保存按鈕更新屬性刪除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 2

爲什麼不能把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時，它在更新時不會顯示。所以只會顯示咆哮信息。但在調用此save方法之前，此布爾值設置爲true。

Answer 3

您可以使用PrimeFaces'<p:remoteCommand>。

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

這是要調用

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

---

在這種特殊情況下但是有一個簡單的方法。將<p:growl>的autoUpdate屬性設置爲true。

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

它會在每個ajax請求中自動更新自己。如果你的組件實際上不支持它，那麼你總是可以將它包裝在<p:outputPanel>中，該組件也支持該屬性。

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

Answer 4

我的建議是：

1. 使用<p:remoteCommand>與actionListener屬性。此屬性調用包含FacesContext.addMessage代碼，這樣一個backing bean的方法：<p:remoteCommand actionListener="myBean.testMethod()" />
2. 接下來，在你的handleSaveNewMember腳本，調用remoteCommandname屬性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 5

您可以使用名爲p：remotecommand的PrimeFaces元素。該元素將執行一個操作（例如，調用一個bean方法）並在該操作之後執行更新。

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