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

Answer 1

Why can't you put p:Dialog inside of < h:panelGroup >. like

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

boolean value which should be set in your save method. on setting this as false in your save method it wont display while updating it. So growl message alone will display. But before calling this save method this boolean value set as true.

Answer 2

you can always do something like this (remove the showmessage id from your save button update attribute)

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

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

EDIT But anyway in your current code , isn't the dialog being closed at the same time that the grwol being updated ?

Answer 3

You can use an PrimeFaces element called p: remotecommand. This element will execute an action (to call a bean method, for example) and to execute an update after that action.

There is an example in this post http://devdublog.blogspot.com/2015/04/best-way-for-calling-method-of.html.

Answer 4

My advice:

1. Use <p:remoteCommand> with an actionListener attribute. This attribute invokes a backing bean method that contains FacesContext.addMessage code, this way: <p:remoteCommand actionListener="myBean.testMethod()" />
2. Next, in your handleSaveNewMember script, invoke the remoteCommand name attribute after addMemberDlg.hide(); this way: <p:remoteCommand name="testScript" actionListener="myBean.testMethod()"/>. Then, function handleSaveNewMember(xhr, status, args) { addMemberDlg.hide(); testScript(); }
3. Add update attribute to remoteCommand pointing growl component: <p:remoteCommand name="testScript" actionListener="myBean.testMethod()" update="showmessage" />
4. Your commandButton is OK.

This worked for me.

Greetings.

Answer 5

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>