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.
Related
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
I need that the variable inside selectItems be available inside selectOneMenu or other way that I can grab what were selected by the user.
I need this because this item need to pass trough an Hibernate.initialize(item)
So I need to call the view (bean) method that I have build that does it.
<h:selectOneMenu
id="dependenteSalvar"
value="#{pessoaView.registro}"
styleClass="form-control"
converter="indexConverter">
<f:selectItem itemValue="#{null}" itemLabel="Selecione..."></f:selectItem>
<t:selectItems
value="#{pessoaView.pessoasAtivas}"
var="dependente"
itemLabel="#{dependente.nome} (#{dependente.documento})"
itemValue="#{dependente}">
</t:selectItems>
</h:selectOneMenu >
Is it possible?
You can use <f:ajax> tag to listen the events of selectOneMenu in your backend.
<h:selectOneMenu
id="dependenteSalvar"
value="#{pessoaView.registro}"
styleClass="form-control"
converter="indexConverter">
<f:selectItem itemValue="#{null}" itemLabel="Selecione..."></f:selectItem>
<t:selectItems
value="#{pessoaView.pessoasAtivas}"
var="dependente"
itemLabel="#{dependente.nome} (#{dependente.documento})"
itemValue="#{dependente}">
</t:selectItems>
<f:ajax listener="#{bean.listener}" />
</h:selectOneMenu >
Take into account that <f:ajax> requires jsf.js file is included in the HTML <h:head>. Basically, this file contains the Javascript functions to perform the magic.
Another option if you are using primefaces is to use
<p:ajax event="change" listener... /> instead of f:ajax, to listen the value change events as follows:
<p:selectOneMenu
id="dependenteSalvar"
value="#{pessoaView.registro}"
styleClass="form-control">
<f:selectItem itemValue="#{null}" itemLabel="Selecione..."></f:selectItem>
<f:selectItems
value="#{pessoaView.pessoasAtivas}"
var="dependente"
itemLabel="#{dependente.nome} (#{dependente.documento})"
itemValue="#{dependente}">
</f:selectItems>
<p:ajax listener="#{bean.listener}" event="change" />
</p:selectOneMenu >
I have a required select and my problem is that when the user selects an empty option (null) the validation jumps in and the listener call of the select is being skipped. Some components on my view are depending on this value so in case of null being selected the bean won't get actualized and the components don't change.
Example:
<h:form id="createForm">
<p:selectOneMenu id="produktCreateTypSelect"
converter="omnifaces.SelectItemsIndexConverter"
value="#{productController.selectedProduct.typ}" required="true">
<f:selectItem itemValue="#{null}" itemLabel="-- Select --" />
<f:selectItems var="productType" value="#{productController.findAllProducts()}"
itemLabel="#{productType.name}" itemValue="#{productType}" />
<p:ajax process="#this " event="valueChange" update="createForm"
listener="#{productController.printHelloWorld}" />
</p:selectOneMenu>
<h:panelGroup id="dummy1" rendered="#{productController.selectedProduct.type != null}" />
</h:form>
The question is what the best way is to update that panelGroup
'dummy1'
Thanks for any help.
This is my current structure for my p:selectOneMenu:
<h:form id="groupSelectionForm">
<p:outputLabel value="Momentane Gruppe:" for="groupSelection" />
<p:selectOneMenu id="groupSelection" value="#{foodPlanManagementBean.selectedGroup}" style="width:150px">
<f:selectItem itemLabel="-" itemValue="#{null}"/>
<f:selectItems value="#{foodPlanManagementBean.getGroups()}" var="group" itemLabel="#{group.name}" itemValue="#{group}"/>
<p:ajax event="change"/>
</p:selectOneMenu>
</h:form>
This results in a checkbox containing a default value given by the single selectItem as well as a few generated options from the selectItems.
However, the setter for the given field "selectedGroup" is only triggering for the selectItem.
The selectItems do not seem to do anything when they are being clicked.
Any ideas?
try to define a listener in ajax component, ex:
<p:ajax id="seasonAjax" event="change" process="#this" listener="#{yourBean.yourMethod}" update="elementThatYouWantToUpdate" />
process = this to process selected element.
In selectItems don't use get method use directly list elements(put get/set in your bean) ex:
<f:selectItems value="#{yourBean.yourList}" var="" itemLabel="" itemValue="" />
If this doesn't work test if you need to use a converter, if selectedGroup is a complex object or pass directly identification of selectGroup( selectedGroup.id)
I hope it helps.
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.