I want to reset a selectOneMenu with another selectOneMenu to the default value and I can't use ajax.
First menu:
<h:selectOneMenu value="#{bean.rel}" id="relSelection"
valueChangeListener="#{bean.onRelChange}" onchange="submit();"
immediate="true">
<f:selectItems value="#{bean.rel}" />
</h:selectOneMenu>
Menu I want to reset:
<h:selectOneMenu value="#{bean.domSelected}" id="domSelection"
valueChangeListener="#{bean.onDomChange}" onchange="submit()"
hideNoSelectionOption="true" immediate="true" >
<f:selectItem itemValue="#{null}" itemLabel="Select..."
noSelectionOption="true" />
<f:selectItems value="#{bean.domNames}" var="item"
itemLabel="#{item}" itemValue="#{item}"/>
</h:selectOneMenu>
If the first menu is selected after the second already was selected by the user I want to reset the second menu.
I expected that the second menu would display the noSelectionOption after I set its value to null from the onReleaseChange listener, but it keeps the selected value.
Listener:
public void onRelChange(ValueChangeEvent event) {
domSelected = null; //type String
rel = (String) event.getNewValue();
//som other stuff
}
I already tried the remoteCommand approach described here
by adding this:
<p:remoteCommand name="resetInputs" process="#this relSelection"
actionListener="#{bean.clearMenu}" immediate="true">
<p:resetInput target="domSelection" />
</p:remoteCommand>
In the first menu I called the remoteCommand via onChange="submit(); resetInputs()"
Any other Ideas or Ideas why this is not working?
Thanks!
Primefaces 6.1
JSF 2.2
GlassFish 4.1.1
I have the following drop down list:
<h:selectOneMenu value="#{user.favCoffee3}" onclick="">
<f:selectItems value="#{user.favCoffee3Value}" var="c"
itemLabel="#{c.coffeeLabel}" itemValue="#{c.coffeeValue}" />
</h:selectOneMenu>
I would like to launch some method from the bean by drop down list item click. How can I achieve it?
You can use the valueChangeListener attribute, pointing to a method in the managed-bean and add a submit() in the onchange attribute.
The form should look like :
<h:form>
<h:selectOneMenu valueChangeListener="#{bean.valueChanged}"
onchange="submit()">
<f:selectItem itemValue="1" itemLabel="First" />
<f:selectItem itemValue="2" itemLabel="Second" />
</h:selectOneMenu>
</h:form>
And the valueChangeListener method in the managed bean would be:
public void valueChanged(ValueChangeEvent event) {
//do your stuff
}
As part of the basic JSF toolkit, you can use the <f:ajax/> tag to submit (using ajax) your input without need for a full page submit/refresh. Using your code sample
Define the <f:ajax/> tag as a child of the dropdown menu
<h:selectOneMenu value="#{user.favCoffee3}" onclick="">
<f:selectItems value="#{user.favCoffee3Value}" var="c" itemLabel="#{c.coffeeLabel}" itemValue="#{c.coffeeValue}" />
<f:ajax listener="#{user.doSomething}"/>
</h:selectOneMenu>
Define a method (doSomething() in this example) in your backing bean that accepts an instance of AjaxBehaviorEvent
public void doSomething(AjaxBehaviorEvent abe){
//do what you want with your favCoffee3 variable here
}
Further reading:
The <f:ajax/> tag documentation by oracle
Seems to work for a4j:support. Your h:selectOneMenu would look like this:
<h:selectOneMenu value="#{user.favCoffee3}">
<f:selectItems value="#{user.favCoffee3Value}" var="c" itemLabel="#{c.coffeeLabel}" itemValue="#{c.coffeeValue}" />
<a4j:support event="onchange" action="#{user.onSelectOneMenuChange}">
</h:selectOneMenu>
You also need to add the following taglib:
<%# taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
This question already has answers here:
commandButton/commandLink/ajax action/listener method not invoked or input value not set/updated
(12 answers)
Closed 7 years ago.
I am using Primefaces 3.4.2.
I have the following in my JSF page
<p:selectOneMenu id="emp" value="#{mymb.emp.employeeName}"
valueChangeListener="#{mymb.handleChange}"
required="true"
style="width: 150px;">
<f:selectItem noSelectionOption="true"
itemLabel="Please Select"/>
<f:selectItems value="#{mymb.employeeList}" var="emp"
itemLabel="#{emp.employeeName}"
itemValue="#{emp.employeeNumber}"/>
<p:ajax update="sublist"/>
</p:selectOneMenu>
and in ManagedBean
public void handleChange(ValueChangeEvent event){
System.out.println("here "+event.getNewValue());
}
The problem is valueChangeListener is not firing, i.e. handleChange method is not getting invoked. I tried with the following, but it is not working either.
<p:ajax update="sublist" listener="#{mymb.handleChange}" />
Separate JSF page:
<ui:composition template="/templates/layout.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:define name="content">
<h:head>
</h:head>
<h:body>
<h:form id="form">
<p:panelGrid columns="6">
<h:outputLabel value="Employees" for="employees" />
<p:selectOneMenu id="employees"
value="#{mymb.employeesList}"
required="true">
<f:selectItems value="#{mymb.employeesList}" var="emp"
itemLabel="#{emp.employeeName}" />
<p:ajax listener="#{mymb.handleChange}" />
</p:selectOneMenu>
</p:panelGrid>
</h:form>
</h:body>
</ui:define>
</ui:composition>
If you want to use valueChangeListener, you need to submit the form every time a new option is chosen. Something like this:
<p:selectOneMenu value="#{mymb.employee}" onchange="submit()"
valueChangeListener="#{mymb.handleChange}" >
<f:selectItems value="#{mymb.employeesList}" var="emp"
itemLabel="#{emp.employeeName}" itemValue="#{emp.employeeID}" />
</p:selectOneMenu>
public void handleChange(ValueChangeEvent event){
System.out.println("New value: " + event.getNewValue());
}
Or else, if you want to use <p:ajax>, it should look like this:
<p:selectOneMenu value="#{mymb.employee}" >
<p:ajax listener="#{mymb.handleChange}" />
<f:selectItems value="#{mymb.employeesList}" var="emp"
itemLabel="#{emp.employeeName}" itemValue="#{emp.employeeID}" />
</p:selectOneMenu>
private String employeeID;
public void handleChange(){
System.out.println("New value: " + employee);
}
One thing to note is that in your example code, I saw that the value attribute of your <p:selectOneMenu> is #{mymb.employeesList} which is the same as the value of <f:selectItems>. The value of your <p:selectOneMenu> should be similar to my examples above which point to a single employee, not a list of employees.
The valueChangeListener is only necessary, if you are interested in both the old and the new value.
If you are only interested in the new value, the use of <p:ajax> or <f:ajax> is the better choice.
There are several possible reasons, why the ajax call won't work. First you should change the method signature of the handler method: drop the parameter. Then you can access your managed bean variable directly:
public void handleChange(){
System.out.println("here "+ getEmp().getEmployeeName());
}
At the time, the listener is called, the new value is already set. (Note that I implicitly assume that the el expression mymb.emp.employeeName is correctly backed by the corresponding getter/setter methods.)
Another solution is to mix valueChangeListener, ajax and process:
<p:selectManyCheckbox id="employees" value="#{employees}" columns="1" layout="grid" valueChangeListener="#{mybean.fireSelection}" >
<f:selectItems var="employee" value="#{employeesSI}" />
<p:ajax event="valueChange" immediate="true" process="#this"/>
</p:selectManyCheckbox>
Method in mybean is just :
public void fireSelection(ValueChangeEvent event) {
log.debug("New: "+event.getNewValue()+", Old: "+event.getOldValue());
}
Like this, valueChangeEvent is very light !
PS: Works fine with PrimeFaces 5.0
<p:ajax listener="#{my.handleChange}" update="id of component that need to be rerender after change" process="#this" />
import javax.faces.component.UIOutput;
import javax.faces.event.AjaxBehaviorEvent;
public void handleChange(AjaxBehaviorEvent vce){
String name= (String) ((UIOutput) vce.getSource()).getValue();
}
All can be defined as in f:ajax attiributes.
i.e.
<p:selectOneMenu id="employees" value="#{mymb.employeesList}" required="true">
<f:selectItems value="#{mymb.employeesList}" var="emp" itemLabel="#{emp.employeeName}" />
<f:ajax event="valueChange" listener="#{mymb.handleChange}" execute="#this" render="#all" />
</p:selectOneMenu>
event: it can be normal DOM Events like click, or valueChange
execute: This is a space separated list of client ids of components that will participate in the "execute" portion of the Request Processing Lifecycle.
render: The clientIds of components that will participate in the "render" portion of the Request Processing Lifecycle. After action done, you can define which components should be refresh. Id, IdList or these keywords can be added: #this, #form, #all, #none.
You can reache the whole attribute list by following link:
http://docs.oracle.com/javaee/6/javaserverfaces/2.1/docs/vdldocs/facelets/f/ajax.html
Try using p:ajax with event attribute,
My problem were that we were using spring securyty, and the previous page doesn't call the page using faces-redirect=true, then the page show a java warning, and the control doesn't fire the change event.
Solution:
The previous page must call the page using, faces-redirect=true
this works for me:
It can be used inside the dialog, but the dialog can´t be inside any componet such as panels, accordion, etc.
I have some cases where I have a JSF page and for a single input I'd like to set more than one value on the backing bean without doing code in the backing bean.
I can set a single value:
<h:selectOneRadio id="selectMembershipLevel" class="TODO_SELECT"
value="#{joinBackingBean.map[joinBackingBean.map.primary_memberInfo_membershipType_code]}">
<f:selectItem id="basic" itemLabel="#{overrideMsg.pbBasic}" itemValue="B" />
<f:selectItem id="plus" itemLabel="#{overrideMsg.pbPlus}" itemValue="P" />
<f:selectItem id="plusRV" itemLabel="#{overrideMsg.pbPlusRV}" itemValue="RV" />
But if I wanted to set more than one at once can that be done on the JSF page?
#{joinBackingBean.map[joinBackingBean.map.primary_memberInfo_membershipType_code]}
#{joinBackingBean.map[joinBackingBean.map.primary_memberInfo_membershipType_desc]}//Bdesc
#{joinBackingBean.map[joinBackingBean.map.primary_memberInfo_membershipType_type]}//Btype
Bind the other properties via <h:inputHidden> and use JavaScript during change event of the first input to manipulate the value of those hidden inputs to the same as the first input's current value.
Here's a kickoff example:
<h:form id="form">
<h:selectOneRadio value="#{bean.input1}" onchange="document.getElementById('form:input2').value = document.getElementById('form:input3').value = this.value">
<f:selectItem itemValue="one" />
<f:selectItem itemValue="two" />
<f:selectItem itemValue="three" />
</h:selectOneRadio>
<h:inputHidden id="input2" value="#{bean.input2}" />
<h:inputHidden id="input3" value="#{bean.input3}" />
...
</h:form>
Obviously, feel free to refactor to a JS function or throw in some jQuery. Keep in mind that this all won't work if client has JS disabled, and that the enduser could manipulate JS code and request parameters. A server side solution is more robust if you absolutely need the values to be equal.
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.