I have a page with a <h:selectOneMenu> and I want to show some fields or others depending on the chosen value of the selectOneMenu. Is this possible and if so, how?
Yes, this is surely possible. Just bind the dropdown's value to the rendered attribute of the components to be shown/hidden. Here's a kickoff example.
<h:form>
<h:selectOneMenu value="#{bean.item}">
<f:selectItem itemLabel="Select..." />
<f:selectItem itemValue="one" />
<f:selectItem itemValue="two" />
<f:selectItem itemValue="three" />
<f:ajax render="#form" />
</h:selectOneMenu>
<h:panelGroup rendered="#{bean.item == 'one'}">
<p>This will be shown if the selected item equals to "one".</p>
</h:panelGroup>
<h:panelGroup rendered="#{bean.item == 'two'}">
<p>This will be shown if the selected item equals to "two".</p>
</h:panelGroup>
<h:panelGroup rendered="#{bean.item == 'three'}">
<p>This will be shown if the selected item equals to "three".</p>
</h:panelGroup>
</h:form>
The <h:panelGroup> is just examplary. It can be every JSF HTML component, such as <h:inputText> or even another <h:selectOneMenu>.
See also:
Conditionally displaying JSF components
Related
I have a big complex form with validation on most of the fields. Somewhere I have <h:selectOneMenu> where if I select a certain value, I want another <h:selectOneMenu> to appear under it. The second list is initially invisible (I set it with rerender property to false and I make it true with clickListener() function and render it an ajax call).
<o:form>
<h:panelGroup id="group" >
<label>Status</label>
<h:selectOneMenu id="status" immediate="true" label="Status" value="#{candidateBean.statusVO}" converter="omnifaces.SelectItemsConverter" required="true" requiredMessage="The field is empty">
<f:selectItem itemValue="#{null}" itemLabel="-- select one --" />
<f:selectItems value="#{settingsBean.settings.statusListVO.statusVO}" var="status" itemValue="#{status}" itemLabel="#{status.name}"/>
<f:ajax event="valueChange" listener="#{candidateBean.clickListener}" execute="form" render="group" />
</h:selectOneMenu>
<h:messages for="status" style="color:red" />
<label>Invalidation Reason</label>
<h:selectOneMenu id="invalidationReason" rendered="#{candidateBean.falseTest}" label="Invalidation Reason" value="#{candidateBean.invalidationReasonVO}" converter="omnifaces.SelectItemsConverter" requiredMessage="The field is empty">
<f:selectItem itemValue="#{null}" itemLabel="-- select one --" />
<f:selectItems value="#{settingsBean.settings.invalidationReasonListVO.invalidationReasonVO}" var="invalidation" itemValue="#{invalidation}" itemLabel="#{invalidation.name}"/>
</h:selectOneMenu>
</h:panelGroup>
</o:form>
I used <o:form> instead of <h:form> because somewhere in the form I used <o:ignoreValidationFailed> because I needed to update a dataTable with values from a <h:selectOneMenu> and force update on my model.
Everything works except when I select a value from the list, the elements inside the panelGroup are rendered without any style at all and I can't figure out why. If I refresh the page the CSS is loaded on the elements but this is not an option.
My bean is #SessionScoped.
I want a selectOneMenu with the possibility to select 'null' as valid value and/or fire a f:ajax to execute the valueChange event.
My current state looks like this:
<h:selectOneMenu id="energySource" value="#{counter.energySourceType}"
converter="omnifaces.SelectItemsConverter" class="form-control">
<f:selectItems value="#{buildingBean.energySourceTypeSelectItems}"/>
<f:selectItem itemValue="#{null}" itemLabel="Strom" />
<f:ajax execute="#this" render="provider" listener="#{buildingBean.debug()}"/>
</h:selectOneMenu>
<h:messages id="energySourceMessage" for="energySource" styleClass="list-inline alert alert-danger"/>
<h:panelGroup layout="block" id="provider">
<h:panelGroup layout="block" class="form-group" rendered="#{empty counter.energySourceType}">
<label>Strom-Anbieter</label>
Strom
</h:panelGroup>
</h:panelGroup>
At the moment the first change from 'null' to a selectItem-value works but the change back doesn't works since 'null' as value is a workaround in JSF 1.x where the noSelectionOption="true" wasn't available. So how can I do this? It is also needed to set the energySourceType 'null', which is the value of the selectOneMenu and from my point of view doing this within the form is the easiest way, because it's in a loop.
In my scenario i need to change attribute display type from managed bean using ajax
<h:inputText id="text1" value="#{managedBean.value}" />
<h:selectOneRadio value="#{managedBean.option}">
<f:selectItem itemValue="Yes" itemLabel="Yes" />
<f:selectItem itemValue="No" itemLabel="No" />
<f:ajax listener="#{managedBean.changeAttrDisplayType}" event="click" render="text1"/>
</h:selectOneRadio>
If i click yes in the radio button,then attribute(id=text1) will render as textbox and if i click No then attribute (id=text1) will be render as label.
Is it possible ?Please Guide me ...
Yes! this is possible! put your h:inputText and h:outputLabel in a h:panelGroup and in the ajax event rerender the h:panelGroup. Put the condition of which one you want to render in the respective rendered attribute like bellow:
<h:panelGroup id="changingPanel">
<h:outputLabel id="id1"
rendered="#{managedBean.option == 'Yes'}"
value="This is label"/>
<h:inputText id="id2" value="#{managedBean.input}"
rendered="#{managedBean.option == 'No'}" />
</h:panelGroup>
<h:selectOneRadio value="#{managedBean.option}">
<f:selectItem itemValue="Yes" itemLabel="Yes" />
<f:selectItem itemValue="No" itemLabel="No" />
<f:ajax event="click" render="changingPanel"/>
</h:selectOneRadio>
Assumed that, you want to display outputLabel when "Yes" is selected and inputText when "No" is selected.
<h:form action="" prependId="false">
<h:selectOneRadio value="#{managedBean.color}" id="color">
<f:selectItem itemValue="red" itemLabel="Color1 - Red" />
<f:selectItem itemValue="green" itemLabel="Color1 - Green" />
<f:ajax event="click" render="group1" listener="#{managedBean.renderSubQuestions}"/>
</h:selectOneRadio>
<h:panelGroup id="group1">
<h:outputLabel value=" Color Description " rendered="#{managedBean.colorRender}"></h:outputLabel>
<h:inputText rendered="#{managedBean.colorRender}"></h:inputText>
<h:selectOneRadio id="number" value="#{managedBean.integer}" rendered="#{managedBean.colorRender}" >
<f:selectItem itemValue="1" itemLabel="Number1 - 1" />
<f:selectItem itemValue="2" itemLabel="Number1 - 2" />
<f:selectItem itemValue="3" itemLabel="Number1 - 3" />
<f:ajax event="click" render="group2 " listener="#{managedBean.renderSubQuestions}"/>
</h:selectOneRadio>
</h:panelGroup>
<h:panelGroup id="group2">
<h:outputLabel value="Number Description " rendered="#{managedBean.integerRender}"></h:outputLabel>
<h:inputText rendered="#{managedBean.integerRender}"></h:inputText>
</h:panelGroup>
</h:form>
In my scenario I used nested JSF AJAX with nested rendered attribute. If I select a color based on the selection, it rendered some radio button (addition elements) with AJAX. It is working fine, but additional elements with AJAX behavior is not working for me. If I remove rendered attribute in number radio button, it is working fine. I dont know where I did mistake.
It is most likely what your ManagedBean is not in ViewScoped or SessionScoped. When you post back to the bean, you are loosing rendered states. I suggest to change for the ViewScoped one.
Not related :
You should remove the action attribute from the h:form since JSF override it.
I am having a drop down menu, on selecting a particular value from a drop down menu, i have to show a datatable corresponding to it and on selecting second from drop down menu ,value the previous data table should hide and the datatable corresponding to second value should populate and so on
here are my codes:
<h:selectOneMenu value="#{bean.value}"
styleClass="ui-inputfield ui-widget ui-state-default ui-corner-all"
style="width:100px;">
<f:selectItem itemLabel="Select" itemValue="Select" />
<f:selectItem itemLabel="5" itemValue="5" id="mySelectedValue1" onclick="hideOrShow(??);"/>
<f:selectItem itemLabel="6" itemValue="6" id="mySelectedValue2" onclick="hideOrShow(??);"/>
<f:selectItem itemLabel="7" itemValue="7" id="mySelectedValue3" onclick="hideOrShow(??);"/>
</h:selectOneMenu>
<script type="text/javascript">
function hideOrShow(show) {
var obj = document.getElementById("myForm:myPanel");
if (show) {
obj.style.display = "block";
}
else {
obj.style.display = "none";
}
} </script>
<h:panelGrid id="myPanel" columns="2">
...
</h:panelGrid>
My Question is what to put as parameters in HideOrShow() shown as ?? so that java script function will identify it. And how initially all the datatables will be hidden?
thanks: curious
Using plain JS in combination with JSF is often recipe for trouble and unintuitiveness because of the way how JSF state management works. You should prefer solving the problem using pure JSF. It will also often end up in a simpler view. You can use the JSF-provided <f:ajax> for this particular purpose in combination with the rendered attribute on the components to show/hide.
Kickoff example:
<h:form>
<h:selectOneMenu value="#{bean.value}">
<f:selectItem itemLabel="Select" itemValue="#{null}" />
<f:selectItem itemLabel="5" itemValue="5" />
<f:selectItem itemLabel="6" itemValue="6" />
<f:selectItem itemLabel="7" itemValue="7" />
<f:ajax render="tables" />
</h:selectOneMenu>
<h:panelGroup id="tables">
<h:dataTable value="#{bean.list5}" rendered="#{bean.value == 5}">
...
</h:dataTable>
<h:dataTable value="#{bean.list6}" rendered="#{bean.value == 6}">
...
</h:dataTable>
<h:dataTable value="#{bean.list7}" rendered="#{bean.value == 7}">
...
</h:dataTable>
</h:panelGroup>
</h:form>
Make sure that the bean is in the view scope whenever the tables contain by itself input components.