p:commandButton rendered property not working after ajax update (Primefaces 3.5)

10
votes

I reviewed my code lot of times and didnt find questions about it.

I have a problem with p:commandButton rendered property. The p:commandButton is allways displayed even if the getter method returns false. That happens after an ajax update.

I have a p:selectOneMenu with a p:ajax event="change" that sets a MB and updates a p:commandButton (with a rendered property based on a boolean getter) and two other components: a second p:selectOneMenu and a p:outputLabel.

The second p:selectOneMenu and the p:outputLabel are rendered without problems when I change the first p:selectOneMenu selection, but the p:commandButton is allways displayed. The rendered property is not updated.

If I refresh the browser or if I set the update="@form" the p:commandButton is displayed/hidden correctly. But note that all the components are in the same container.

What am I doing wrong? The code:

<p:selectOneMenu id="cmbPais" value="#{pessoaController.selected.endereco.pais}">
    <f:selectItems value="#{paisController.itemsSelectOne}"/>
    <p:ajax event="change" update="cmbEstado,btnBuscaPeloEndereco,test"/>
</p:selectOneMenu>

<p:outputLabel id="test" value="#{pessoaController.selected.endereco.ok}"/>

<p:commandButton id="btnBuscaPeloEndereco" icon="ui-icon-correios" type="button" onclick="dlgCEP.show();" rendered="#{pessoaController.selected.endereco.ok}"/>

<p:selectOneMenu id="cmbEstado" value="#{pessoaController.selected.endereco.estado}">
    <f:selectItems value="#estadoController.getItemsSelectOne(pessoaController.selected.endereco.pais)}"/>
    <f:ajax event="change" render="cmbCidade" />
</p:selectOneMenu>
2
jsf-2primefaces

2 Answers

18
votes

You can only ajax-update a component which is always rendered (i.e. when it does not have a rendered attribute). JSF ajax engine does not support addition/removal of a HTML element. It only supports the change of a HTML element.

So, wrap it in a component which is always rendered and ajax-update it instead.

<p:selectOneMenu id="cmbPais" value="#{pessoaController.selected.endereco.pais}">
    <f:selectItems value="#{paisController.itemsSelectOne}"/>
    <p:ajax event="change" update="cmbEstado,btnBuscaPeloEndereco,test"/>
</p:selectOneMenu>

<h:panelGroup id="btnBuscaPeloEndereco">
    <p:commandButton icon="ui-icon-correios" type="button" onclick="dlgCEP.show();" rendered="#{pessoaController.selected.endereco.ok}"/>
</h:panelGroup>

See also:

0
votes

If you don't want modify your code, you can use css instead rendered ej:

<x:element style="#{condition ? 'visibility: hidden':' visibility: visible'}" />

EDIT: this can be undo by some user so if you element need to be secure don't use. however if you want to hide/show only with visual purpose you can use it.