How to automatically show a text field after selecting a specific value in p:selectOneMenu using PrimeFaces?

Question

I want to show a new text field, or undisable it, when I select a specific item in p:selectOneMenu.

Code:

<p:selectOneMenu id="especie" value="#{histopatologiaMB.histopatologia.especie}">
    <f:selectItem itemLabel="Selecione" itemValue="" />
    <f:selectItem itemLabel="Canino" itemValue="Canino" />
    <f:selectItem itemLabel="Caprino" itemValue="Caprino" />
    <f:selectItem itemLabel="Coelho" itemValue="Coelho" />
    <f:selectItem itemLabel="Felino" itemValue="Felino" />
    <f:selectItem itemLabel="Suíno" itemValue="Suíno" />
    <f:selectItem itemLabel="Equino" itemValue="Equino" />
    <f:selectItem itemLabel="Ovino" itemValue="Ovino" />
    <f:selectItem itemLabel="Ave Doméstica" itemValue="Ave Doméstica" />
    <f:selectItem itemLabel="Silvestre" itemValue="Silvestre" />
</p:selectOneMenu>

After the user selects the item "Silvestre", the following inputMask or inputText should appear:

<p:inputMask id="detalhe" size="30" value="#{histopatologiaMB.histopatologia.silvestreDetalhe}" maxlength="255"/>

I've been searching for a solution and I've found some, but none resolved my issue. If someone knows how solve it, please help me.

Answer 1

Try this, this is working for me.

<p:selectOneMenu id="especie" value="#{histopatologiaMB.histopatologia.especie}">
  <f:selectItem itemLabel="Canino" itemValue="Canino" />
 <f:selectItem itemLabel="Caprino" itemValue="Caprino" />

  <p:ajax update=":formId:detalhe" listener="#{bean.ajaxMethod}"  />

<p:inputText id="detalhe" size="30" value="#{histopatologiaMB.histopatologia.silvestreDetalhe}" maxlength="255" style="display: #{userBean.showText ? '' : 'none'}"> 




private Boolean showText = false;  

//Getter-setter of showText

public void ajaxMethod() {
    if (getEspecie().isEmpty()) {
        setShowText(false);
    } else {
        setShowText(true);
    }
}

Answer 2

You should add a listener inside your selectOneMenu.

<p:selectOneMenu id="especie" value="#{histopatologiaMB.histopatologia.especie}">
    <f:selectItem itemLabel="Selecione" itemValue="" />
    <f:selectItem itemLabel="Canino" itemValue="Canino" />
    <f:selectItem itemLabel="Caprino" itemValue="Caprino" />
    <f:selectItem itemLabel="Coelho" itemValue="Coelho" />
    <f:selectItem itemLabel="Felino" itemValue="Felino" />
    <f:selectItem itemLabel="Suíno" itemValue="Suíno" />
    <f:selectItem itemLabel="Equino" itemValue="Equino" />
    <f:selectItem itemLabel="Ovino" itemValue="Ovino" />
    <f:selectItem itemLabel="Ave Doméstica" itemValue="Ave Doméstica" />
    <f:selectItem itemLabel="Silvestre" itemValue="Silvestre" />
    <p:ajax update="detalhe" event="change" listener="#{bean.listener}" />
</p:selectOneMenu>

And inside your bean add a boolean value with getter and setter.

public private renderedInputMask = false;


public boolean isRenderedInputMask() {
    return renderedInputMask;
}

public void setRenderedInputMask(boolean renderedInputMask) {
    this.renderedInputMask = renderedInputMask;
}

Inside your listener you have to do the work you need for showing or not the inputMask. When you need to show it pass the boolean value to true.

public void listener() {
    //Do some stuff for showing or not the inputMask.
    renderedInputMask = true;
}

And add the rendered attribut to your inputMask with the boolean value.

<h:panelGrid id="detalhe" columns="1">
    <p:inputMask size="30" rendered="#{bean.renderedInputMask}" value="#{histopatologiaMB.histopatologia.silvestreDetalhe}" maxlength="255"/>
</h:panelGrid>

I hope this would help you.