Is it possible to have in <h:selectManyListbox> a default option like "--choose--" which can be selected when no option is selected. When the some value is chosen, then it must be unselectable.
<h:selectManyListbox value="#{bean.value}"
class="form-control">
<f:selectItems value="#{bean.dropdownValues}" var="value" itemLabel="#{value}" itemValue="#{value}"/>
</h:selectManyListbox>
Just add it as another <f:selectItem> and ask assistance of a bit of JavaScript to disable it when any value is selected during the change event.
<h:selectManyListbox ... onchange="options[0].disabled=!!value">
<f:selectItem itemLabel="--choose--" itemValue="#{null}" />
<f:selectItems ... />
</h:selectManyListbox>
The options[0] refers to the first option of the selection element. The !!value basically converts the selected item value to a boolean (which will be true when it's not empty/null), suitable for disabled attribute.
See also:
Best way to add a "nothing selected" option to a selectOneMenu in JSF
Related
Is there a way to render a component based on the current value the user has selected from a selectOneMenu component? My selectOneMenu component is populated with an enum consisting of two values, smoker and non-smoker. If the user has smoker selected I want to render a checkbox below it which lets the user check how many they smoke a day 10, 20, 30+, etc. I also want the opposite to work if they user has selected non-smoker i.e. the check boxes don't render/disappear.
Just check the dropdown menu's value in the rendered attribute of the target components and update their common parent by a <f:ajax>. Here's a kickoff example:
<h:selectOneMenu value="#{bean.item}">
<f:selectItem itemValue="one" />
<f:selectItem itemValue="two" />
<f:selectItem itemValue="three" />
<f:ajax render="results" />
</h:selectOneMenu>
<h:panelGroup id="results">
<h:panelGroup rendered="#{bean.item eq 'one'}">
You have selected "one".
</h:panelGroup>
<h:panelGroup rendered="#{bean.item eq 'two'}">
You have selected "two".
</h:panelGroup>
<h:panelGroup rendered="#{bean.item eq 'three'}">
You have selected "three".
</h:panelGroup>
</h:panelGroup>
If you'd like to perform some business logic based on the selected value, use <f:ajax listener>.
<f:ajax listener="#{bean.changeItem}" render="results" />
public void changeItem() {
someResult = someService.getByItem(item);
}
See also:
Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?
How to load and display dependent h:selectOneMenu on change of a h:selectOneMenu
Conditionally displaying JSF components
I have a form which contains a dropdown and two input fields.
<h:selectOneMenu />
<h:inputText />
<h:inputText />
I would like to make the required attribute of the input fields conditional depending on the selected value of the dropdown. If the user chooses the first item of the dropdown, then the input fields must be required. If the user chooses the second item, then those would not be required.
How can I achieve this?
Just bind the dropdown to the view and directly check its value in the required attribute.
<h:selectOneMenu binding="#{menu}" value="#{bean.item}">
<f:selectItem itemValue="first" itemLabel="First item" />
<f:selectItem itemValue="second" itemLabel="Second item" />
</h:selectOneMenu>
<h:inputText value="#{bean.input1}" required="#{menu.value eq 'first'}" />
<h:inputText value="#{bean.input2}" required="#{menu.value eq 'first'}" />
Note that the binding example is as-is. Do absolutely not set it to a bean property here. See also How does the 'binding' attribute work in JSF? When and how should it be used?
Also note that the ordering of the components is significant. If the menu is located below the inputs in the tree, use #{menu.submittedValue eq 'first'} instead. Or if you want to be independent from that, use #{param[menu.clientId] eq 'first'} instead.
Assuming you are using JSF 2.0: Let your SelectOneListBox execute with ajax and re-render the input fields on change of the list box:
A quick sketch:
<h:selectOneMenu value="#{myBean.myMenuValue}">
<f:ajax render="input1"/>
..
</h:selectOneMenu>
<h:inputText id="input1" value="#{myBean.myInputValue}"
required="#{myBean.myMenuValue == 'firstEntry'}" />
Is there a way to render a component based on the current value the user has selected from a selectOneMenu component? My selectOneMenu component is populated with an enum consisting of two values, smoker and non-smoker. If the user has smoker selected I want to render a checkbox below it which lets the user check how many they smoke a day 10, 20, 30+, etc. I also want the opposite to work if they user has selected non-smoker i.e. the check boxes don't render/disappear.
Just check the dropdown menu's value in the rendered attribute of the target components and update their common parent by a <f:ajax>. Here's a kickoff example:
<h:selectOneMenu value="#{bean.item}">
<f:selectItem itemValue="one" />
<f:selectItem itemValue="two" />
<f:selectItem itemValue="three" />
<f:ajax render="results" />
</h:selectOneMenu>
<h:panelGroup id="results">
<h:panelGroup rendered="#{bean.item eq 'one'}">
You have selected "one".
</h:panelGroup>
<h:panelGroup rendered="#{bean.item eq 'two'}">
You have selected "two".
</h:panelGroup>
<h:panelGroup rendered="#{bean.item eq 'three'}">
You have selected "three".
</h:panelGroup>
</h:panelGroup>
If you'd like to perform some business logic based on the selected value, use <f:ajax listener>.
<f:ajax listener="#{bean.changeItem}" render="results" />
public void changeItem() {
someResult = someService.getByItem(item);
}
See also:
Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?
How to load and display dependent h:selectOneMenu on change of a h:selectOneMenu
Conditionally displaying JSF components
I have a form which contains a dropdown and two input fields.
<h:selectOneMenu />
<h:inputText />
<h:inputText />
I would like to make the required attribute of the input fields conditional depending on the selected value of the dropdown. If the user chooses the first item of the dropdown, then the input fields must be required. If the user chooses the second item, then those would not be required.
How can I achieve this?
Just bind the dropdown to the view and directly check its value in the required attribute.
<h:selectOneMenu binding="#{menu}" value="#{bean.item}">
<f:selectItem itemValue="first" itemLabel="First item" />
<f:selectItem itemValue="second" itemLabel="Second item" />
</h:selectOneMenu>
<h:inputText value="#{bean.input1}" required="#{menu.value eq 'first'}" />
<h:inputText value="#{bean.input2}" required="#{menu.value eq 'first'}" />
Note that the binding example is as-is. Do absolutely not set it to a bean property here. See also How does the 'binding' attribute work in JSF? When and how should it be used?
Also note that the ordering of the components is significant. If the menu is located below the inputs in the tree, use #{menu.submittedValue eq 'first'} instead. Or if you want to be independent from that, use #{param[menu.clientId] eq 'first'} instead.
Assuming you are using JSF 2.0: Let your SelectOneListBox execute with ajax and re-render the input fields on change of the list box:
A quick sketch:
<h:selectOneMenu value="#{myBean.myMenuValue}">
<f:ajax render="input1"/>
..
</h:selectOneMenu>
<h:inputText id="input1" value="#{myBean.myInputValue}"
required="#{myBean.myMenuValue == 'firstEntry'}" />
I'm facing a problem with the ice:selectOneMenu component in Icefaces..
In more details :
When I fill the SelecItems arrayList I set an empty selcetItem at the first index in the arrayList, like that : mainClassificationsSI.add(new SelectItem(""));, and in My page I have the following :
<ice:selectOneMenu partialSubmit="true" binding="#
{editOutgoingBean.mainClassificationSelect}" id="mBookClass" value="#
{editOutgoingBean.outgoing.main_Classification}" valueChangeListener="#
{editOutgoingBean.mainClassificationChanged}">
<f:selectItems value="#{editOutgoingBean.mainClassificationsSI}"/>
</ice:selectOneMenu>
First of all, I'm sure that the: editOutgoingBean.outgoing.main_Classification has value which is one of the values of selectItems in the SelectItems arrayList, but when the page is displayed, the Select tag select the empty value and it didn't select the value of the main_Classification I set before...
When I remove the first Empty SelectItem from the ArrayList, the Select tag will select the value that I set for main_Classification. Please help me find out what to do...
try this ,may help you.
<ice:selectOneMenu partialSubmit="true" binding="#
{editOutgoingBean.mainClassificationSelect}" id="mBookClass" value="#
{editOutgoingBean.outgoing.main_Classification}" valueChangeListener="#
{editOutgoingBean.mainClassificationChanged}">
<f:selectItem itemLabel="Select" itemValue="-1" />
<f:selectItems value="#{editOutgoingBean.mainClassificationsSI}"/>
</ice:selectOneMenu>`
and don't the black select item from the bean as you were doing