I want to have multiple <h:selectOneMenu> that are displayed by selection of main <h:selectOneMenu>
example which is not working
<h:form id="selectForm">
<h:selectOneMenu id="main" value="#{bean.main}">
<f:selectItem itemValue="1" itemLabel="1"/>
<f:selectItem itemValue="2" itemLabel="2"/>
<f:selectItem itemValue="3" itemLabel="3"/>
<f:selectItem itemValue="4" itemLabel="4"/>
<f:ajax render="hotelSearch"/>
</selectOneMenu>
//this one is displayed if main is greater than 1
<h:selectOneMenu id="2" rendered="main>1">
<f:selectItem itemValue="1" itemLabel="1"/>
<f:selectItem itemValue="2" itemLabel="2"/>
<f:selectItem itemValue="3" itemLabel="3"/>
<f:selectItem itemValue="4" itemLabel="4"/>
</h:selectOneMenu>
//this one is displayed if main is greater than 2
<h:selectOneMenu id="3" rendered="main>2">
<f:selectItem itemValue="1" itemLabel="1"/>
<f:selectItem itemValue="2" itemLabel="2"/>
<f:selectItem itemValue="3" itemLabel="3"/>
<f:selectItem itemValue="4" itemLabel="4"/>
</h:selectOneMenu>
</h:form>
How can I achieve this?
You need to make it a valid EL expression #{}.
(update: code example is updated to reflect the new functional requirement to make it to work without the need for a managed bean)
<h:form id="selectForm">
<h:selectOneMenu binding="#{mainMenu}">
<f:selectItem itemValue="1" itemLabel="1"/>
<f:selectItem itemValue="2" itemLabel="2"/>
<f:selectItem itemValue="3" itemLabel="3"/>
<f:selectItem itemValue="4" itemLabel="4"/>
<f:ajax render="#form"/>
</h:selectOneMenu>
<h:selectOneMenu rendered="#{mainMenu.value gt 1}">
<f:selectItem itemValue="1" itemLabel="1"/>
<f:selectItem itemValue="2" itemLabel="2"/>
<f:selectItem itemValue="3" itemLabel="3"/>
<f:selectItem itemValue="4" itemLabel="4"/>
</h:selectOneMenu>
<h:selectOneMenu rendered="#{mainMenu.value gt 2}">
<f:selectItem itemValue="1" itemLabel="1"/>
<f:selectItem itemValue="2" itemLabel="2"/>
<f:selectItem itemValue="3" itemLabel="3"/>
<f:selectItem itemValue="4" itemLabel="4"/>
</h:selectOneMenu>
</h:form>
Note that I used gt instead of > as it's an illegal character in XML. You can find all EL operators in the Java EE tutorial.
See also:
Conditionally displaying JSF components
Related
In the below editable drop down how to restrict the user to enter only numbers.
<p:selectOneMenu editable="true">
<f:selectItem itemLabel="0" itemValue="0" />
<f:selectItem itemLabel="5" itemValue="5"/>
<f:selectItem itemLabel="10" itemValue="10" />
<f:selectItem itemLabel="20" itemValue="20"/>
</p:selectOneMenu>
I want to create a JSF application. In the application the user will have two drop downs.
If a user selects the country Mexico / value 3 from the first drop down then he is required to choose the option Cancun / value 6 from the multiselect
I have added the binding , required attribute for multiSelectListbox but they are not triggered when the drop down is selected
<h:form>
<p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true" />
<p:panel header="Tranfer Destination" style="margin-bottom:10px;">
<h:panelGrid columns="2" cellpadding="5">
<p:outputLabel for="country" value="Country: " />
<p:selectOneMenu id="country" value="#{dropdownView.country}" style="width:150px" required="true" binding="#{country}">
<f:selectItem itemLabel="Select Country" itemValue="" noSelectionOption="true" />
<f:selectItems value="#{dropdownView.countries}" />
</p:selectOneMenu>
<p:outputLabel for="city" value="City: " />
<p:multiSelectListbox id="city" value="#{dropdownView.city}" style="width:150px" required="#{not empty param[country.6]}">
<f:selectItem itemLabel="Select City" itemValue="" noSelectionOption="true" />
<f:selectItem itemLabel="New York" itemValue="1"> </f:selectItem>
<f:selectItem itemLabel="Chicago" itemValue="2"> </f:selectItem>
<f:selectItem itemLabel="Seattle" itemValue="3"> </f:selectItem>
<f:selectItem itemLabel="Toronto" itemValue="4"> </f:selectItem>
<f:selectItem itemLabel="Ontario" itemValue="5"> </f:selectItem>
<f:selectItem itemLabel="Cancun" itemValue="6"> </f:selectItem>
<f:selectItem itemLabel="Tijuana" itemValue="7"> </f:selectItem>
</p:multiSelectListbox>
</h:panelGrid>
<p:separator />
<p:commandButton value="Submit" update="msgs" action="#{dropdownView.displayLocation}" icon="pi pi-check" />
</p:panel>
</h:form>
The option Cancun / value 6 is required from the second drop down only If the user selects the country Mexico / value 3 from the first drop down
After selecting first drop-down, you need to update <p:multiSelectListbox id="city"/>.
<p:selectOneMenu id="country"
value="#{dropdownView.country}"
style="width:150px"
required="true"
binding="#{country}">
<f:selectItem itemLabel="Select Country" itemValue="" noSelectionOption="true" />
<f:selectItems value="#{dropdownView.countries}" />
<p:ajax update="city"/>
</p:selectOneMenu>
I have following selectOneMenu
<p:selectOneMenu value="#{bean.value}">
<f:selectItem value="#{bean.item1}"/>
<f:selectItem value="#{bean.item2}"/>
<f:selectItem value="#{bean.item3}"/>
<p:ajax listener="#{bean.item3AjaxEvent}" update="fieldToUpdate"></p:ajax>
</p:selectOneMenu>
Now I want to do some AJAX action only when item3 is selected from selectOneMenu. Not for all the items. Is there any way of doing that?
Putting ajax tag will fire the event for all the select items. I don't want to generate unwanted ajax requests to server.
I would do it in this way.
xhtml
<p:selectOneMenu widgetVar="selectOneMenuWV"
onchange="checkItem()">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItem itemLabel="Option 1" itemValue="1" />
<f:selectItem itemLabel="Option 2" itemValue="2" />
<f:selectItem itemLabel="Option 3" itemValue="3" />
</p:selectOneMenu>
<p:remoteCommand name="myRemoteCommand"
actionListener="#{bean.item3AjaxEvent()}"
update="fieldToUpdate"/>
<script>
function checkItem() {
if(selectOneMenuWV.getSelectedValue() == 3) {
myRemoteCommand();
}
}
</script>
Hope this helps.
I have two checkboxes.
<h:panelGrid id="userActivationGridcheckbox">
<p:selectManyCheckbox value="#{user.activationModecheckbox}" layout="pageDirection">
<f:selectItem itemLabel="Account Expiration(in days)" itemValue="byEmailcheckbox" />
<f:selectItem itemLabel="Reset User Password" itemValue="byAdmincheckbox" />
<f:ajax event="change" render="userActivationGridcheckbox" />
</p:selectManyCheckbox>
<h:panelGrid id="manualActivationGridcheckbox" rendered="#{user.manualActivationcheckbox}" columns="2">
<p:selectOneRadio value="#{user.activationModecheckbox}" layout="pageDirection">
<f:selectItem itemLabel="label1" itemValue="value1" />
<f:selectItem itemLabel="label2" itemValue="value2" />
<h:outputLabel>label</h:outputLabel>
<h:inputText value="" />
</p:selectOneRadio>
</h:panelGrid>
</h:panelGrid>
When the first checkbox is checked, then 2 more radio buttons should show up. When the second checkbox is not checked, then the radio buttons should not show up. How can I achieve this?
You need to decide in some listener method whether or not to show the radio group to the user, for example, by keeping a boolean in a backing bean. Then just render the component via AJAX.
Example usage:
The view:
<h:form>
<p:selectManyCheckbox id="check" value="#{bean.options}">
<p:ajax process="#this" update="radio" listener="#{bean.listener}" />
<f:selectItem itemLabel="Option 1" itemValue="Option 1" />
<f:selectItem itemLabel="Option 2" itemValue="Option 2" />
</p:selectManyCheckbox>
<h:panelGroup id="radio" layout="block">
<h:panelGrid rendered="#{bean.needsSuboptions}" columns="2">
<p:selectOneRadio value="#{bean.suboption1}" layout="pageDirection" >
<f:selectItem itemLabel="Select ---" itemValue="" />
<f:selectItem itemLabel="Suboption 1-1" itemValue="Suboption 1-1" />
<f:selectItem itemLabel="Suboption 1-2" itemValue="Suboption 1-2" />
</p:selectOneRadio>
<p:selectOneRadio value="#{bean.suboption2}" layout="pageDirection" >
<f:selectItem itemLabel="Select ---" itemValue="" />
<f:selectItem itemLabel="Suboption 2-1" itemValue="Suboption 2-1" />
<f:selectItem itemLabel="Suboption 2-2" itemValue="Suboption 2-2" />
</p:selectOneRadio>
</h:panelGrid>
</h:panelGroup>
</h:form>
And the bean:
List<String> options;//getter+setter
String suboption1;//getter+setter
String suboption2;//getter+setter
boolean needsSuboptions = false;//getter
public void listener() {
needsSuboptions = options.contains("Option 1");
}
You can also do with f:ajax as the code that skuntsel provided.
<f:ajax render="" execute="" listener=""/>
maps to:
<p:ajax update="" process="" listener=""/>
<p:selectManyCheckbox id="check" value="#{displayPanel.options}">
<f:ajax event="change" render="radio" listener="#{displayPanel.listener}" />
<f:selectItem itemLabel="Option 1" itemValue="Option 1" />
<f:selectItem itemLabel="Option 2" itemValue="Option 2" />
</p:selectManyCheckbox>
<h:panelGroup id="radio" layout="block">
<h:panelGrid rendered="#{displayPanel.n}" columns="2">
<p:selectOneRadio value="#{displayPanel.a}" layout="pageDirection">
<f:selectItem itemLabel="Select ---" itemValue="" />
<f:selectItem itemLabel="Suboption 1-1" itemValue="Suboption 1-1" />
<f:selectItem itemLabel="Suboption 1-2" itemValue="Suboption 1-2" />
</p:selectOneRadio>
<p:selectOneRadio value="#{displayPanel.b}" layout="pageDirection">
<f:selectItem itemLabel="Select ---" itemValue="" />
<f:selectItem itemLabel="Suboption 2-1" itemValue="Suboption 2-1" />
<f:selectItem itemLabel="Suboption 2-2" itemValue="Suboption 2-2" />
</p:selectOneRadio>
</h:panelGrid>
you forgot the provide listener for f:ajax.
I have this selectOneRadio:
<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
<h:outputText value="Options: " />
<p:selectOneRadio id="options" value="#{formBean.number}">
<f:selectItem itemLabel="Option 1" itemValue="1" />
<f:selectItem itemLabel="Option 2" itemValue="2" />
<f:selectItem itemLabel="Option 3" itemValue="3" />
</p:selectOneRadio>
</h:panelGrid>
How I can save value in bean, without submit button?
You can use a <p:ajax /> inside the selectOneRadio
Just add one row inside your p:selectOneRadio
In your case it should be this:
<p:ajax listener="#{formBean.setNumber(formBean.number)}"/>
It worked for me in this case:
<p:selectOneRadio id="answer" value="#{test.selectedAnswer}" layout="grid" columns="1">
<f:selectItem itemValue="0" itemLabel="#{test.activeAnswers.get(0).getText()}" itemDisabled="#{progressBar.disabled}" />
<f:selectItem itemValue="1" itemLabel="#{test.activeAnswers.get(1).getText()}" itemDisabled="#{progressBar.disabled}" />
<f:selectItem itemValue="2" itemLabel="#{test.activeAnswers.get(2).getText()}" itemDisabled="#{progressBar.disabled}" />
<f:selectItem itemValue="3" itemLabel="#{test.activeAnswers.get(3).getText()}" itemDisabled="#{progressBar.disabled}" />
<p:ajax listener="#{test.setSelectedAnswer(test.selectedAnswer)}"/>
</p:selectOneRadio>