[SOLVED] Hide/Show component with backing bean

Hide/Show component with backing bean

I having a list of items to display, where I wanted to restrict user from clicking the ShowMore button when the set of items have all displayed.

my code:

<div class="row center">
    <h:commandButton id="morebutton" rendered="#{homeBean.hasMoreProjects()}" styleClass="hoverable btn-large yellow lighten-2 black-text" value="SHOW MORE" >
        <f:ajax listener="#{homeBean.showMore()}" render="result morebutton" />
    </h:commandButton>
</div>

The issue here is the button will not be hide whenever the list of items is all shown, but it will be hide when I refresh the whole page.

How can I check the method when I check the button?

Any helps will be much appreciate, Thanks

EDIT 1:

this question is slightly different from the question Ajax update/render does not work on a component which has rendered attribute, this question stating the commandLink button targeting to the button itself for hide/show rendering where the issue from the link is to target the input form

Solution

You always need to render the parent component in jsf2, this should work:

<a4j:outputPanel id="morebuttonPanel" styleClass="row center">
    <h:commandButton id="morebutton" rendered="#{homeBean.hasMoreProjects()}" styleClass="hoverable btn-large yellow lighten-2 black-text" value="SHOW MORE" >
        <f:ajax listener="#{homeBean.showMore()}" render="result morebuttonPanel" />
    </h:commandButton>
</a4j:outputPanel>