I have a JSF page with a selectOneMenu and an inputText.
The inputText need apears only with some option is selected on selectOneMenu.
Here is the JSF code:
<span>
<h:selectOneMenu id="select" value="#{myBean.model.selectValue}" >
<f:selectItem itemValue="1" itemLabel="1" />
<f:selectItem itemValue="2" itemLabel="2" />
<f:selectItem itemValue="3" itemLabel="3" />
<f:ajax listener="#{myBean.showInput}" render="input" />
</h:selectOneMenu>
</span>
<span>
<h:inputText id="input" value="#{myBean.model.inputValue}" rendered="#{myBean.input}"/>
</span>
Here is MyBean code:
@ManagedBean(name = "myBean")
public class MyBean {
public class Model {
private String selectValue = "";
private String inputValue = "";
public String getInputValue() {
return inputValue;
}
public void setInputValue(String inputValue) {
this.inputValue = inputValue;
}
public String getSelectValue() {
return selectValue;
}
public void setSelectValue(String selectValue) {
this.selectValue = selectValue;
}
}
private Model model = new Model();
private boolean input = false;
public Model getModel() {
return model;
}
public void setModel(Model model) {
this.model = model;
}
public boolean isInput() {
return input;
}
public void setInput(boolean input) {
this.input = input;
}
public void showInput() {
this.input = "3".equals(model.getSelectValue());
}
}
But the input is never showing. No matter which is selected on selectOneMenu.
What I'm missing?
#{myBean.input}
is initially false, so the component isn't rendered when the page is loaded. You'll have to target the parent container of h:inputText
from f:ajax
, because once the rendered attribute is false
, that input text is no longer in the component tree and can't be re-rendered. Try this
<span>
<h:selectOneMenu id="select" value="#{myBean.model.selectValue}" >
<f:selectItem itemValue="1" itemLabel="1" />
<f:selectItem itemValue="2" itemLabel="2" />
<f:selectItem itemValue="3" itemLabel="3" />
<f:ajax listener="#{myBean.showInput}" render="wrapper" />
</h:selectOneMenu>
</span>
<span>
<h:panelGroup id="wrapper">
<h:inputText id="input" value="#{myBean.model.inputValue}" rendered="#{myBean.input}"/>
</h:panelGroup>
</span>