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.

I did what you suggest, Lamq. Inside the listener(), I put this code: "if (histopatologia.getEspecie().equalsIgnoreCase("Silvestre")) { renderedInputMask = true; }". But this dind't work until I changed the update inside the p:ajax from "detalhe" to ":form:test" and I put the inputMask inside a . It works, but the inputMask field is generated outside the main form, and not beside the the p:selectOneMenu. Have you any idea how to make the inputMask field be shown next to selecOneMenu? — Edylle Landy, May 22 '14 at 04:58
Yeah but for this i need your full xhtml page could you please update your post with it ? — Joffrey Hernandez, May 22 '14 at 20:04

score 1 · Answer 1 · answered May 22 '14 at 07:39

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);
    }
}

Joffrey Hernandez · Answer 2 · 2014-05-20T20:04:18.087

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.

You must put the `p:inputMask` into a wrapper that will have the `id="detalhe"` — Alexandre Lavoie, May 20 '14 at 19:39

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

2 Answers2