I am facing problem in resetting the p:selectOneMenu. In my facelet, I have two p:selectOneMenu items. My requirement is that, if user chooses something from first p:selectOneMenu, then second p:selectOneMenu should reset itself and vice versa.
Below is the code I am using:
<p:outputLabel for="country" value="Country:" />
<p:selectOneMenu id="country" effect="none"
value="#{infoBean.infoDataHolder.selectedCountry}">
<f:selectItem itemLabel="Select One" itemValue=""
noSelectionOption="true" />
<f:selectItems
value="#{infoBean.infoDataHolder.availableCountries}"
var="aCountry" itemLabel="#{aCountry.description}"
itemValue="#{aCountry.description}" />
<p:ajax update="state"
listener="#{infoBean.resetState()}" />
</p:selectOneMenu>
<p:outputLabel for="state" value="State:" />
<p:selectOneMenu id="state" effect="none"
value="#{infoBean.infoDataHolder.selectedState}">
<f:selectItem itemLabel="Select One" itemValue=""
noSelectionOption="true" />
<f:selectItems
value="#{infoBean.infoDataHolder.availableStates}"
var="aState" itemLabel="#{aState}"
itemValue="#{aState}" />
<p:ajax update="country"
listener="#{infoBean.resetCountry()}" />
</p:selectOneMenu>
My backing bean InfoBean is in RequestScope and infoDataHolder is in View Scope.
In infoBean.resetCountry() / infoBean.resetState(), I am making the infoBean.infoDataHolder.selectedCountry / infoBean.infoDataHolder.selectedState as null.
Now what is happening is that when I am choosing State, Country p:selectOneMenu is getting resetted. but choosing country, State p:selectOneMenu is not getting resetted.
Could you please help me here. Thanks.
You may wanted to update parent component of select one menu like
<p:panel id="panel_">
<p:selectOneMenu id="country" ...
<p:ajax update="panel_" listener="#{infoBean.resetState()}" />
</p:selectOneMenu>
<p:selectOneMenu id="state" ...
<p:ajax update="panel_" listener="#{infoBean.resetCountry()}" />
</p:selectOneMenu>
</p:panel>
I can't see the point of your requirement of reseting the country list when selecting an state. The proper behaviour here is, in my opinion, allowing the end user to choose an State inside each country. That's done by loading the related states for each country and rendering the dependent h/p:selectOneMenu.
I don't encourage you to use two different beans for that, just go with #ViewScoped. Also accessing transient JSF managed beans from the view the way you do (#{infoBean.infoDataHolder}) does not make sense in JSF, just access to a bean directly.
Here you've got my workaround:
#ManagedBean
#ViewScoped
public class InfoDataHolder {
private List<String> availableCountries = Arrays.asList("USA",
"Switzerland");
private List<String> availableStates = new ArrayList<String>();
private String selectedCountry;
private String selectedState;
public void countrySelected() {
if ("USA".equals(selectedCountry)) {
availableStates = Arrays.asList("Arizona", "California");
} else if ("Switzerland".equals(selectedCountry)) {
availableStates = Arrays.asList("Zurich", "Bern");
} else {
availableStates = new ArrayList<String>();
}
}
public List<String> getAvailableCountries() {
return availableCountries;
}
public List<String> getAvailableStates() {
return availableStates;
}
public String getSelectedCountry() {
return selectedCountry;
}
public String getSelectedState() {
return selectedState;
}
public void setSelectedCountry(String selectedCountry) {
this.selectedCountry = selectedCountry;
}
public void setSelectedState(String selectedState) {
this.selectedState = selectedState;
}
}
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head />
<h:body>
<h:form>
<h:selectOneMenu value="#{infoDataHolder.selectedCountry}">
<f:selectItem noSelectionOption="true" itemLabel="Choose a Country" />
<f:selectItems var="country"
value="#{infoDataHolder.availableCountries}" itemValue="#{country}" />
<f:ajax listener="#{infoDataHolder.countrySelected}"
render="state_selection" />
</h:selectOneMenu>
<h:selectOneMenu value="#{infoDataHolder.selectedState}"
id="state_selection">
<f:selectItem noSelectionOption="true" itemLabel="Choose an State" />
<f:selectItems value="#{infoDataHolder.availableStates}" var="state"
itemValue="#{state}" />
</h:selectOneMenu>
</h:form>
</h:body>
</html>
See also:
h:selectOneMenu wiki
Related
I've googled and stackoverflowed a lot but I can't seem to find the answer.
What needs to be done is that the outputLabel's value needs to be updated when the selection change, also inputText's disabled needs to change to enabled when you select option B. (Furthermore; the selected value is displayed in the inputText)
My xhtml snipped:
<p:selectOneMenu id="findex" value="#{myController.selected.findex}" >
<p:ajax update="extra1 labelextra1" immediate="true"/>
<f:selectItem itemLabel="Value A" itemValue="A" />
<f:selectItem itemLabel="Value B" itemValue="B" />
</p:selectOneMenu>
<p:outputLabel id="labelextra1" value="#{myController.selected.findex == 'A' ? '' : 'X'}" for="extra1"/>
<p:inputText id="extra1" value="#{myController.selected.findex}" disabled="#{myController.selected.findex == 'A'}"/>
(A listener in my backing bean does get called if I add it to the ajax, but I'm not sure that I require that, it is a simple on change event, isn't it?)
I make a little example. This works fine. I think you have no <h:form> right? You need a form for it.
.XHTML
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Jsf page.</title>
</h:head>
<h:body>
<h:form>
<p:selectOneMenu id="findex" value="#{myController.test}">
<f:selectItem itemLabel="Value A" itemValue="A" />
<f:selectItem itemLabel="Value B" itemValue="B" />
<p:ajax update="labelextra1 extra1" />
</p:selectOneMenu>
<p:outputLabel id="labelextra1" value="#{myController.test}" for="extra1" />
<p:inputText id="extra1" value="hello" disabled="#{myController.test == 'A'}"/>
</h:form>
</h:body>
</html>
BEAN:
#ManagedBean
#ViewScoped
public class MyController implements Serializable{
private String test = "hallo";
public String getTest() {
return test;
}
public void setTest(String test) {
this.test = test;
}
}
I m using JSF-2 and I want to show an Outputtext when changes h:selectOneMenu value to 'A' , but it doesnt work :
Here is the view:
<p:column>
<p:selectOneMenu id="type"
value="#{Controller.typeR}" style="width:100px;">
<f:selectItem itemLabel="--Selectionner--" itemValue="-1" />
<f:selectItem itemLabel="A" itemValue="1" />
<f:selectItem itemLabel="B" itemValue="2" />
<f:selectItem itemLabel="C" itemValue="3" />
<p:ajax update="test"
listener="#{Controller.handleTypeChange}" />
</p:selectOneMenu>
</p:column>
<p:column>
<h:outputText id ="test" value="A OK :" rendered="#{Controller.typeAOk}" />
</p:column>
the managed bean
#SuppressWarnings("serial")
#ManagedBean(name = "Controller")
#ViewScoped
public class NoIe{
public void handleTypeChange(){
if (typeR.equals("1")) {
setTypeAOk(true);
System.out.print(typeAOk);
}}
//Getter and Setter
Any help will be greatly appreciated!
As #{Controller.typeAOk} seems to be false your outputText won't be part of the resulting html page and thus, it won't be available for updating.
In cases like this, you will need to wrap your outputText inside another component and then update that component which is always rendered. Here is an example:
<p:column>
<p:outputPanel id="test">
<h:outputText value="A OK :" rendered="#{Controller.typeAOk}" />
</p:outputPanel>
</p:column>
Once again: Only rendered components can be updated.
Here is the full code I used to test the solution (note that you can use a panelGroup too):
<h:form>
<p:dataTable value="#{viewMBean.list}" var="l">
<p:column>
<p:selectOneMenu id="type" value="#{viewMBean.id}" style="width:100px;">
<f:selectItem itemLabel="--Selectionner--" itemValue="-1" />
<f:selectItem itemLabel="A" itemValue="1" />
<f:selectItem itemLabel="B" itemValue="2" />
<f:selectItem itemLabel="C" itemValue="3" />
<p:ajax update="test" />
</p:selectOneMenu>
</p:column>
<p:column>
<h:panelGroup id ="test">
<h:outputText value="A OK :" rendered="#{viewMBean.id eq 1}" />
</h:panelGroup>
</p:column>
</p:dataTable>
</h:form>
The ManagedBean
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
#ManagedBean
#ViewScoped
public class ViewMBean implements Serializable {
private Integer id;
private List<SimpleBean> list;
#PostConstruct
public void setup() {
list = new ArrayList<SimpleBean>();
list.add(new SimpleBean(11, "A"));
list.add(new SimpleBean(22, "B"));
list.add(new SimpleBean(33, "C"));
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public List<SimpleBean> getList() {
return list;
}
}
I want to update idOutput everytime that I change the value of selectOneMenu, but when it changes once a time to a value different of null I can't asign null another time, I think that is due to the required="true", but I don't know how to avoid the validation only in the ajax request.
Here is the code:
Bean:
#ViewScoped
#ManagedBean
public class ProbeNull implements Serializable
{
private static final long serialVersionUID = 1628174277372407129L;
private Boolean probe;
public ProbeNull()
{
super();
}
public void show()
{
System.err.println("Value : " + probe);
}
public void save()
{
System.err.println("Save : " + probe);
}
public Boolean getProbe()
{
return probe;
}
public void setProbe(Boolean probe)
{
System.err.println("Setter: " + probe);
this.probe = probe;
}
}
xhtml:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">
<h:head />
<h:body>
<h:outputText id="idOutput" value="#{probeNull.probe}" />
<h:form id="form">
<p:selectOneMenu id="select" required="true" value="#{probeNull.probe}">
<f:selectItem itemLabel="Select one" itemValue="#{null}" />
<f:selectItem itemLabel="Yes" itemValue="true" />
<f:selectItem itemLabel="No" itemValue="false" />
<p:ajax update=":idOutput" />
</p:selectOneMenu>
<p:commandButton value="Save" ajax="false" action="#{probeNull.save()}" />
</h:form>
<h:form>
<p:commandButton value="Show value" ajax="false" action="#{probeNull.show()}" />
</h:form>
</h:body>
</html>
How can avoid it?
You can do what you want by using two remoteCommand tags and JavaScript.
<p:remoteCommand name="makeSelection" process="select" update=":idOutput" />
<p:remoteCommand name="clearSelection" process="#this" update="select,:idOutput" >
<f:setPropertyActionListener value="#{null}" target="#{probeNull.probe}" />
</p:remoteCommand>
Now you can decide which one to call using a javascript funcion
<p:selectOneMenu id="select" required="true" value="#{probeNull.probe}" onchange="selectFunction(this)">
...
function selectFunction(el){
//if el.value is empty you call clearSelection();
//else you call makeSelection();
}
Don't forget to delete the <p:ajax update=":idOutput" />
thanks for any suggestions.
I i'm trying to use primefaces component when i select element and proceed getting null pointer exception due to contractid, which can not be null because i have already initiated this.
Here is the code.
<h:selectOneMenu id="ContractName" value="#{managedContract.c.contract_id}" style="width: 300px;" required="true" requiredMessage="Please Select Contract.">
<f:selectItem itemValue="" itemLabel="-Select Contract-" noSelectionOption="true" itemDisabled="true"></f:selectItem>
<f:selectItems value="#{managedContract.contracts}" var="contractvar" itemLabel="#{contractvar.contract_name}" itemValue="#{contractvar.contract_id}" />
</h:selectOneMenu>
public class ManagedContract{
private int contractid;
public managedContract(){
this.contractid=0;
//getter
//setter
//....
}
romove var="contractvar" itemLabel="#{contractvar.contract_name}" itemValue="#{contractvar.contract_id}" from <f:selectItems>
<h:selectOneMenu id="ContractName" value="#{managedContract.c.contract_id}" style="width: 300px;" required="true" requiredMessage="Please Select Contract.">
<f:selectItem itemValue="" itemLabel="-Select Contract-" noSelectionOption="true" itemDisabled="true"></f:selectItem>
<f:selectItems value="#{managedContract.contracts}" />
</h:selectOneMenu>
and in your bean you must have getContracts() method
#ManagedBean
#ViewScoped
public class ManagedContract imlements java.io.Serializable{
private int contractid;
public managedContract(){
this.contractid=0;
}
//getter
//setter
//....
}
i have these simple pages:
list.xhtml
<h:form id="form">
<h:dataTable value="#{testBean.model}" var="elem">
<h:column>
<f:facet name="header">code</f:facet>
#{elem.code}
</h:column>
<h:column>
<f:facet name="header">description</f:facet>
#{elem.description}
</h:column>
<h:column>
<f:facet name="header">action</f:facet>
<h:commandButton action="#{testBean.edit(elem)}" value="edit"/>
</h:column>
</h:dataTable>
</h:form>
edit.xhtml
<h:form id="form">
<h:panelGrid columns="2">
<h:outputLabel value="code"/>
<h:inputText value="#{testBean.selection.code}"/>
<h:outputLabel value="description"/>
<h:inputText value="#{testBean.selection.description}"/>
</h:panelGrid>
<h:commandButton action="#{testBean.update}" value="update"/>
</h:form>
and this bean:
#ManagedBean
public class TestBean implements Serializable
{
private static final long serialVersionUID = 1L;
#EJB
private PersistenceService service;
private Object selection;
private List<UnitType> model;
#PostConstruct
public void init()
{
model = service.findAll(UnitType.class);
}
public String edit(Object object)
{
System.out.println(Tracer.current(object));
setSelection(object);
return "edit";
}
public String update()
{
System.out.println(Tracer.current(selection));
return "list";
}
// getters and setters
}
so the table is rendered, when i click one of the "edit" buttons it navigates to "edit.jsf" showing filled input,
but when i click the "update" buttons it gives me this error:
javax.el.PropertyNotFoundException: /test2/edit.xhtml #27,54 value="#{testBean.selection.code}": Target Unreachable, 'null' returned null
note that i know how to implement a #ViewScoped interface to manage CRUD operations, but this is a simple proof of concept that i need to better understand JSF lifecycle.
so i want "testBean" to be #RequestScoped
UPDATE trying with f:viewParam, still not understanding...
list.xhtml
<?xml version="1.0" encoding="ISO-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>test list</title>
</h:head>
<h:body>
<h:messages/>
<h:form id="form">
<h:dataTable value="#{testBean2.model}" rows="10" var="elem">
<h:column>
<f:facet name="header">converterString</f:facet>
#{elem.converterString}
</h:column>
<h:column>
<f:facet name="header">first name</f:facet>
#{elem.firstName}
</h:column>
<h:column>
<f:facet name="header">last name</f:facet>
#{elem.lastName}
</h:column>
<h:column>
<f:facet name="header">action</f:facet>
<h:commandButton action="#{testBean2.edit}" value="edit">
<f:param name="entity" value="#{elem.converterString}"/>
</h:commandButton>
<h:commandButton action="#{testBean2.edit2}" value="edit2">
<f:param name="entity" value="#{elem.converterString}"/>
</h:commandButton>
</h:column>
</h:dataTable>
</h:form>
</h:body>
</html>
edit.xhtml
<?xml version="1.0" encoding="ISO-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core">
<f:metadata>
<f:viewParam id="entityParam" name="entity" value="#{testBean2.selection}" converter="entityConverter" required="true"/>
</f:metadata>
<h:head>
<title>test edit</title>
</h:head>
<h:body>
<h:messages/>
<h:form id="form">
<h:panelGrid columns="2">
<h:outputLabel value="selection"/>
<h:outputText value="#{testBean2.selection.converterString}"/>
<h:outputLabel value="firstName"/>
<h:inputText value="#{testBean2.selection.firstName}"/>
<h:outputLabel value="lastName"/>
<h:inputText value="#{testBean2.selection.lastName}"/>
</h:panelGrid>
<h:commandButton action="#{testBean2.update}" value="update" ajax="false">
<f:param name="entity" value="#{testBean2.selection.converterString}"/>
</h:commandButton>
</h:form>
</h:body>
</html>
testBean2.java
#ManagedBean
public class TestBean2 implements Serializable
{
private static final long serialVersionUID = 1L;
#EJB
private PersistenceService service;
private Object selection;
private List<Person> model;
#PostConstruct
public void init()
{
Tracer.out();
model = service.queryAll(Person.class);
}
public String edit()
{
JsfUtils.addSuccessMessage("edited");
return "edit";
}
public String edit2()
{
JsfUtils.addSuccessMessage("edited");
return "edit?faces-redirect=true&includeViewParams=true";
}
public void update()
{
Tracer.out(selection);
JsfUtils.addSuccessMessage("updated");
}
// getters and setters
}
if i press "edit" button it goes to edit page, but selection is null and no message is showed.
if i press "edit2" button it goes to edit page, but selection is null, showing required message and the url is edit.jsf?entity=
what am i doing wrong?
As my understand, when your second request come to testBean, selection Object is null. If you run this with session bean you may not get this error.
The way I see it, there's no clean way to achieve what you want.
I'll suggest you simply pass around an Id attr between requests as a simple request parameter. So in your post constructor, check if the parameter value is set and based on that, perform a look in your persistence layer.
Alternatively, using the setup you already have, bind the:
<h:inputText value="#{testBean.selection.code}"/>
component to your backing bean and call getValue() on it when necessary. Either way, still untidy.
If you find any other way, please let us know.
Finally I found a way: data will be in a long scope, bean in short.
Note that this is just a proof of concept, not a real use case. And be aware, when dealing with #RequestScope beans, of PrimeFaces lazy DataTable model scope
#ManagedBean
public class TestBean
{
#EJB
private PersistenceService service;
#ManagedProperty("#{viewScope.item}")
private Item item;
#ManagedProperty("#{sessionScope.model}")
private EntityDataModel<Item> model;
#PostConstruct
public void init()
{
if(model == null)
{
model = new EntityDataModel<Item>(Item.class);
Faces.setSessionAttribute("model", model);
}
}
public String update()
{
Faces.getFlash().setKeepMessages(true);
try
{
item = service.update(item);
Faces.setViewAttribute("item", item);
JsfUtils.addSuccessMessage("updated");
return "view?faces-redirect=true&includeViewParams=true";
}
catch(Exception e)
{
e.printStackTrace();
JsfUtils.addErrorMessage(e);
}
return null;
}
// getters and setters, other actions, ...
}
list.xhtml
<p:dataTable value="#{testBean.model}" var="elem" ...>
...
<p:column exportable="false" toggleable="false" headerText="#{bundle.actions}">
<!-- two techniques available for navigation -->
<p:button outcome="view?id=#{elem.converterString}" icon="#{icons.view}" />
<p:commandButton rendered="#{user.isEditAllowed(elem)}"
action="edit?faces-redirect=true&includeViewParams=true" process="#form"
icon="#{icons.edit}">
<f:param name="id" value="#{elem.converterString}" />
</p:commandButton>
</p:column>
</p:dataTable>
view.xhtml
<f:metadata>
<o:viewParam id="itemId" name="id" value="#{viewScope.item}" required="true"
converter="entityConverter" />
</f:metadata>
<ui:composition template="/WEB-INF/templates/template.xhtml">
<ui:define name="content">
<p:panelGrid columns="2">
<h:outputLabel value="#{bundle.name}" />
<h:outputText value="#{item.name}" />
...
</p:panelGrid>
<p:button outcome="list" value="#{bundle.list}" icon="#{icons.list}" />
<p:button rendered="#{user.isEditAllowed(item)}"
outcome="edit?id=#{item.converterString}" value="#{bundle.edit}"
icon="#{icons.edit}" />
</ui:define>
</ui:composition>
edit.xhtml
<f:metadata>
<o:viewParam id="itemId" name="id" value="#{viewScope.item}" required="true"
converter="entityConverter" />
</f:metadata>
<ui:composition template="/WEB-INF/templates/template.xhtml">
<ui:define name="content">
<p:panelGrid columns="2">
<h:outputLabel value="#{bundle.name}" />
<h:panelGroup>
<p:inputText id="name" value="#{item.name}" />
<p:message for="name" />
</h:panelGroup>
...
</p:panelGrid>
<p:commandButton process="#form" update="#form" action="#{testBean.update}"
value="#{bundle.update}" icon="#{icons.update}" />
<p:button outcome="view?id=#{item.converterString}" value="#{bundle.cancel}"
icon="#{icons.cancel}" />
</ui:define>
</ui:composition>