JSF + PrimeFaces: `update` attribute does not update component

Question

Here is my layout

<div id="mainPanel">
   <div id="padding">
       <h:outputText id="text" value="Personal Feed" rendered="#{Profile.renderComment}"/>
   </div>
   <div id="right">
       <h:form>
           <p:commandButton value="Update" actionListener="#{bean.toggleComment}" update="text" />
       </h:form>
   </div>
</div>

When I click the link Update, which is supposed to toggle the renderComment boolean on and off, it does not toggle the display of the text Personal Feed. Now if I put a form around the h:outputText, and update the form instead, then it works. Why is that?

See my answer here; related: https://stackoverflow.com/a/53015102/1599699 — Andrew, Oct 26 '18 at 19:22

score 67 · Accepted Answer · answered Jan 01 '11 at 13:58

The update attribute should point to an existing client ID in the HTML DOM tree. However, since the element is not available in the HTML DOM tree because it's not rendered by the server side, JS/ajax cannot find anything in HTML DOM tree to update.

In fact, you should wrap it in another element which is always available in the HTML DOM tree so that Ajax can locate it and then use its client ID in update. In your case, you can use padding for this.

<div id="mainPanel">
   <h:panelGroup id="padding" layout="block">
       <h:outputText id="text" value="Personal Feed" rendered="#{Profile.renderComment}"/>
   </h:panelGroup>
   <div id="right">
       <h:form>
           <p:commandButton value="Update" actionListener="#{bean.toggleComment}" update=":padding" />
       </h:form>
   </div>
</div>

BaluC, what does `:` mean in the rendered attribute before `padding`? One level up? — rozerro, May 17 '16 at 05:19

JSF + PrimeFaces: `update` attribute does not update component

1 Answers1

Linked