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

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?

Solution 1:

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>