How to trigger component refresh from javascript in primefaces?

Question

Is it possible to update a PrimeFaces component from javascript so that it would be force to refresh?

I am making an ajax save call using this button in a dialog. I have attached my custom javascript on the oncomplete event.

<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 save button, I am adding a message here to display it to the client using the growl component.

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

}

My problem is, how can I sequence the UI such that, i should hide the dialog first before the growl component could show the meesage?

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

What's happening is that the growl component is displayed alongside the dialog at the same time.

Thanks.

Answer 1

You can use PrimeFaces' <p:remoteCommand> for this.

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

which is to be invoked as

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

---

In this particular case there's however a simpler way. Set the autoUpdate attribute of <p:growl> to true.

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

It'll auto-update itself on every ajax request. If your component actually didn't support it, then you could always wrap it in a <p:outputPanel> which also supports that attribute.

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