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?
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With