Wie löst man die Komponentenaktualisierung von JavaScript in Oberflächen ab?

Question

Ist es möglich, eine PrimeFaces-Komponente von Javascript zu aktualisieren, so dass es notwendig wäre, sie zu aktualisieren?

Ich mache einen Ajax speichern Anruf mit dieser Schaltfläche in einem Dialogfeld. Ich habe mein benutzerdefiniertes JavaScript an das Ereignis oncomplete angehängt.

..während speichern Schaltfläche, ich bin hier eine Nachricht hinzufügen, um es anzuzeigen, den Client mithilfe der Komponente knurren.

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

} 

Mein Problem ist, wie kann ich die Benutzeroberfläche so sequenzieren, dass ich den Dialog verstecken sollte zuerst vor dem Knurren Komponente die meesage zeigen konnte?

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

Was passiert ist, dass die Komponente knurrt wird neben dem Dialog zur gleichen Zeit angezeigt.

Danke.

Answer 1

man kann immer etwas tun (entfernen Sie die Showmessage-ID aus dem Speichern-Button Attribute update)

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

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

EDIT Aber wie auch immer in Ihrem aktuellen Code wird nicht der Dialog an dem geschlossen Gleichzeitig, dass der Grwol aktualisiert wird?

Answer 2

Warum können Sie nicht p: Dialog innerhalb von < h: panelGroup>. wie

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

Boolescher Wert, der in Ihrer Speichermethode festgelegt werden sollte. Wenn Sie dies in Ihrer Speichermethode als false festlegen, wird es während der Aktualisierung nicht angezeigt. So wird nur die Growl-Nachricht angezeigt. Bevor diese Speichermethode aufgerufen wird, wird dieser boolesche Wert als wahr gesetzt.

Answer 3

Sie können PrimeFaces '<p:remoteCommand> dafür verwenden.

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

die als

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

---

In dieser speziellen Fall es jedoch ist ein einfacher Weg, aufgerufen werden. Setzen Sie das autoUpdate Attribut von <p:growl> auf true.

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

Es aktualisiert sich automatisch bei jeder Ajax-Anfrage. Wenn Ihre Komponente dies nicht unterstützt, können Sie sie immer in eine <p:outputPanel> umbrechen, die auch dieses Attribut unterstützt.

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

Answer 4

Mein Rat:

1. Verwenden <p:remoteCommand> mit einem actionListener Attribute.Dieses Attribut ruft eine Backing Bean-Methode, die FacesContext.addMessage Code enthält, auf diese Weise: <p:remoteCommand actionListener="myBean.testMethod()" />
2. nächste in Ihrem handleSaveNewMember Skript, rufen Sie das remoteCommandname Attribut nach addMemberDlg.hide(); auf diese Weise: <p:remoteCommand name="testScript" actionListener="myBean.testMethod()"/>. Dann function handleSaveNewMember(xhr, status, args) { addMemberDlg.hide(); testScript(); }
3. Add update Attribut remoteCommand zeigt knurren Komponente: <p:remoteCommand name="testScript" actionListener="myBean.testMethod()" update="showmessage" />
4. Ihre commandButton OK ist.

Das funktionierte für mich.

Grüße.

Answer 5

Sie können ein PrimeFaces-Element namens p: remotecommand verwenden. Dieses Element führt eine Aktion aus (um beispielsweise eine Bean-Methode aufzurufen) und um nach dieser Aktion ein Update auszuführen.

Es gibt ein Beispiel in diesem Beitrag http://devdublog.blogspot.com/2015/04/best-way-for-calling-method-of.html.