I've been trying to do something that would be really simple... yet it won't work.
I have 2 "p:selectOneMenu", so that the second one items depends on the chosen item in the first one. They both have their own methods in the bean to list their items.
What I wanted to do was when the first changes its value, update the another so that the component should reload the list considering the choosen object. But the ajax never happens, at least in debug the method in the Bean is never called again.
What is wrong? The code is something like...
Thanks!!! :)
<p:selectOneMenu value="#{itemBean.lotacao}">
<f:selectItem itemLabel="Choose one" />
<f:selectItems value="#{itemBean.listLotacoes()}"
var="lotacao"
itemLabel="#{lotacao.format()}" />
<p:ajax update="localizacaoPorLotacao" />
</p:selectOneMenu>
<p:selectOneMenu id="localizacaoPorLotacao"
value="#{itemBean.localizacao}">
<f:selectItem itemLabel="Choose one" />
<f:selectItems value="#{itemBean.listByLotacao(itemBean.lotacao)}" />
</p:selectOneMenu>
#ManagedBean
#SessionScoped
public class ItemBean {
// attributes, getters and setters here...
public List<Lotacao> listLotacoes() {
LotacaoService lotacaoService = new LotacaoService();
List<Lotacao> lotacoes = lotacaoService.getAll();
return lotacoes;
}
public List<Lotacao> listByLotacao(Lotacao lotacao) {
if (lotacao == null) {
return new ArrayList<Lotacao>();
}
String prefixo = lotacao.getCodigo().substring(0, 1);
LotacaoService lotacaoService = new LotacaoService();
List<Lotacao> lotacoes = lotacaoService.getByPrefix(prefixo);
return lotacoes;
}
}
Found it!
The lack of a converter to the class made the JSF don't trigger the setter.
After creating a converter and adding it to the OneMenu, the code worked just fine.
The final version is:
<p:selectOneMenu value="#{itemQuadroVagasBean.lotacao}"
converter="orgaoLotacaoCodigoConverter">
<p:ajax event="change"
update="localizacaoPorLotacao" />
<f:selectItem itemLabel="Selecione a lotação" />
<f:selectItems value="#{itemQuadroVagasBean.listarLotacoes()}"
var="lotacao"
itemLabel="#{lotacao.formatarLocalizacao()}" />
</p:selectOneMenu>
Maybe you need event:
<p:ajax update="localizacaoPorLotacao" event="change"/>
Related
I'm developing a java application using jsf and put the <p: selectOneMenu /> component primefaces in my project,But the <p: selectOneMenu /> <f: selectItems> component items do not appear and <selectOneMenu /> has disappeared
UPDATE
<h:panelGroup layout="block" styleClass="tamanho">
<p>Tamanho:</p> <p:selectOneMenu id="tamanhos" value="#{tamanho.tamanho}" styleClass="tamanho" effect="fold" editable="true">
<f:selectItem itemValue="#{null}" itemLabel="-- select one --" />
<f:selectItems value="#{tamanho.tamanhos_roupas}" />
</p:selectOneMenu>
#ManagedBean(name="tamanho")
#RequestScoped
public class Tamanho {
private String tamanho;
private List<SelectItem> tamanhos_roupas; // +getter (no setter necessary)
#PostConstruct
public void init() {
tamanhos_roupas = new ArrayList<SelectItem>();
tamanhos_roupas.add(new SelectItem("PP", "PP"));
tamanhos_roupas.add(new SelectItem("P", "P"));
tamanhos_roupas.add(new SelectItem("M", "M"));
tamanhos_roupas.add(new SelectItem("G", "G"));
tamanhos_roupas.add(new SelectItem("GG", "GG"));
}
public String getTamanho() {
return tamanho;
}
public void setTamanho(String tamanho) {
this.tamanho = tamanho;
}
public List<SelectItem> getTamanhos_roupas() {
return tamanhos_roupas;
}
}
Look how the copier of the primefaces was, disappeared itens the <p:selectOneMenu/>
page
I'm assuming "#{tamanho.tamanhos_roupas}" is a list that has values in it already, so what you need to do is add 'var', 'itemValue' and 'itemLabel' in your selectItems tag.
The 'var' attribute is the name of the variable of your list elements in every iteration, 'itemValue' is what #{tamanho.tamanho} value will be after selecting an option and 'itemLabel' is what will the user read to identify that option.
<h:panelGroup layout="block" styleClass="tamanho">
<p>Tamanho:</p> <p:selectOneMenu id="tamanhos" value="#{tamanho.tamanho}"
styleClass="tamanho" effect="fold" editable="true">
<f:selectItem itemValue="#{null}" itemLabel="-- select one --" />
<f:selectItems value="#{tamanho.tamanhos_roupas}" var="tamanho"
itemValue="#{tamanho}" itemLabel="#{tamanho.stringNome}" />
</p:selectOneMenu>
See, the way your code is written you are only giving your SelectOneMenu the information you have items to iterate, but you never tell him what is the name and value of those items.
I have a javascript code that clears all the p:inputText (after a p:commandButton action) of the form. The problem is that the p:selectOneMenu still has the f:selectItem selected in the option it was selected. I need to put the values in the first f:selectItem of each p:selectOneMenu.
How to I do that? How can I clear the selected values?
The java script code:
<script type="text/javascript">
function limpiarForm()
{
document.getElementById("formularioAltas").reset();
}
</script>
formularioAltas is the form id.
The code of the p:commandButton:
<p:commandButton value="Guardar" action="#{altasBean.agregarRefaccion()}" oncomplete="limpiarForm()" />
And that code does not reset(I dont want to clear the values, I just want to put the first option selected) the values of the p:selectOneMenu
Here it is:
<h:outputText value="Estado de la refacción" />
<p:selectOneMenu value="#{altasBean.refaccion.estado}">
<f:selectItem itemLabel="..." itemValue="0" />
<f:selectItem itemLabel="Ok" itemValue="Ok" />
<f:selectItem itemLabel="Reparar" itemValue="Reparar" />
<f:selectItem itemLabel="Sospechoso" itemValue="Sospechoso" />
</p:selectOneMenu>
The bean:
private RefaccionBean refaccion = null;
/**
* Get the value of refaccion
*
* #return the value of refaccion
*/
public RefaccionBean getRefaccion() {
return refaccion;
}
/**
* Set the value of refaccion
*
* #param refaccion new value of refaccion
*/
public void setRefaccion(RefaccionBean refaccion) {
this.refaccion = refaccion;
}
public void agregarRefaccion() {
I did a lot of things here...
And after those things i clear the p:inputText with the javascript code
-> After that i want to set the values of the p:selectOneMenu in the fist f:selectItem
}
Josef's answer does lead you in the right direction, but since you shared some code, I will just use it in my answer.
First, make sure that your button calls your bean method and updates the selectOneMenu component after it's done. Although there's some ajax going on here, primefaces abstracts that for you.
<p:commandButton value="Guardar" action="#{altasBean.agregarRefaccion}" update="selectOneMenu" />
The update attribute is important as it will look for the component whose id matches whatever is specified there. So you need to give your selectOneMenu an id. If you need to update more than one component, you can add their ids to the update attribute separated by either space or comma.
<h:outputText value="Estado de la refacción" />
<p:selectOneMenu value="#{altasBean.refaccion.estado}" id="selectOneMenu">
<f:selectItem itemLabel="..." itemValue="0" />
<f:selectItem itemLabel="Ok" itemValue="Ok" />
<f:selectItem itemLabel="Reparar" itemValue="Reparar" />
<f:selectItem itemLabel="Sospechoso" itemValue="Sospechoso" />
</p:selectOneMenu>
Now it's just a matter of cleaning up your values inside your action method:
public void agregarRefaccion() {
//If you have other values to clean, clean them here
this.refaccion.estado="0"; //Matches the value for your first item
}
Now I'm not entirely sure if I follow you, but let me know if this helps you out at all. It's entirely JSF and I threw in some ajax. You can play around with your javascript still.
Front-end:
<p:inputText id="input" value="#{bean.value}" />
<p:commandButton value="button" action="#{bean.action}">
<f:ajax execute="input" render="output" />
</p:commandButton>
<p:selectOneMenu id="output" value="#{bean.placeValue}">
<f:selectItems value="#{bean.values}" />
</p:selectOneMenu>
Bean:
#ManagedBean
#RequestScoped
public class Bean {
private String value;
private List<String> values;
#EJB
private ValueService valueService;
#PostConstruct
public void init() {
values = valueService.list();
}
public void action() {
// ... Action taken
}
public String placeValue() {
// ... Validation and clear desired values
return value;
}
// ... (getters, setters, etc)
}
Following example:
<h:selectOneMenu value="#{bean.value}">
<f:selectItem itemValue="#{null}" itemDisabled="#{true}" noSelectOption="#{true}" itemLabel="choose one" />
<f:selectItem itemValue="FEMALE" itemLabel="female" />
<f:selectItem itemValue="MALE" itemLabel="male" />
<f:converter converterId="myConverter" />
</h:selectOneMenu>
On initial load the value of the bean is null so the please-choose-option is selected. If the user chooses nothing the browser won’t submit a value (the selected option is disabled) and JSF will set the value to an empty String. If the page is rendered again there is no according value, JSF won't render a selected-attribute and most browsers will preselect the first non-disabled-value. Bad.
I thought I could easily change this with a Converter which converts the empty String to null
in getAsObject. But in this case the converter is not called.
Anybody knows why?
I know that I could change this behaviour with javax.faces.INTERPRET_EMPTY_STRING_SUBMITTED_VALUES_AS_NULL
but this leads to other problems with other fields.
I solved my problem by setting the selected-attribute manually:
<f:selectItem itemValue="#{null}" itemDisabled="#{true}" noSelectOption="#{true}" itemLabel="choose one" />
<f:passThroughAttributes value="#{bean.attributes}" />
</f:selectItem>
public Map<String, String> getAttributes() {
Map<String, String> attributes = new HashMap<>();
if (value == null || "".equals(value)) {
attributes.put("selected", "selected");
}
}
return attributes;
}
I am trying to get the value from on change in h:selectOneMenu using p:ajax.
But I am getting null value always, dont know whats wrong below is the code.
<h:form>
<h:selectOneMenu id="selectMenu" value="#{userHomeController.gymsSelectType}">
<f:selectItem itemLabel="Close to me" itemValue="closest" />
<f:selectItem itemLabel="Visited by me" itemValue="visited" />
<p:ajax process="selectMenu" listener="#{userHomeController.selectMenuListener}" event="change" update=":home-form:panel" />
</h:selectOneMenu>
</h:form>
and the bean class is
public void selectMenuListener() {
System.out.println("-------- >> " + gymsSelectType); // here null coming
if (gymsSelectType.equals("a")) {
//
} else {
//
}
}
this is a viewscoped class.
and below setter for the variable gymsSelectType is also prints null
public void setGymsSelectType(String gymsSelectType) {
System.out.println("------------ >> "+gymsSelectType);
this.gymsSelectType = gymsSelectType;
}
Have your tries this
<p:ajax process="#this" listener="#{userHomeController.selectMenuListener}" event="change" update=":home-form:panel" />
Try this
<p:ajax partialSubmit="true" listener="#{userHomeController.selectMenuListener}" event="change" update=":home-form:panel" />
I have a scenario to achieve but I don't know how to do it(I'am using primefaces)
The scenario is:
I have a selectOneMenu that contain options that the user can choose one of them,
when the user choose an option ,a "form" or a "Sub-page" should appear below the selectOneMenu , the user should fill it.
The "Sub-page" change according to the choosen option
eg :option1 ---> Sub-Page1
option2 --->Sub-Page2 etc..
JSF
<h:selectOneMenu style="width:200px" immediate="true" value="#{ToolsKPI.myChoice}" onchange="submit()" valueChangeListener="#{BeanTest.selectChangeHandler}" required="true" >
<f:selectItems value="#{ToolsKPI.getMyListKPI()}" />
</h:selectOneMenu>
<p:panel rendered="#{BeanTest.showPanelBool}" >
<h1>KPI1</h1>
<br></br>
<h:inputText value="test1" />
</p:panel>
<p:panel rendered="#{BeanTest.showPanelBool1}" >
<br></br>
<h1>KPI2</h1>
<h:inputText value="test2" />
<h:inputText value="test3" />
</p:panel>
My Bean
public class BeanTest implements java.io.Serializable {
private String myChoice;
private boolean showPanelBool;
private boolean showPanelBool1;
public BeanTest() {
}
//getters ande setters
public void selectChangeHandler(ValueChangeEvent event){
myChoice = (String) event.getNewValue(); // Must however be the exact page URL. E.g. "contact.jsf".
FacesContext.getCurrentInstance().getExternalContext();
if(myChoice.equals("Number Of Closed issues") ){
this.showPanelBool = true;
} else{
this.showPanelBool = false;
this.showPanelBool1 = true;
}
FacesContext.getCurrentInstance().renderResponse();
}
}
You should really post some semblance of the code: a picture something. What you're probably looking for is a "p:outputPanel" component or something similar.
http://www.primefaces.org/showcase/ui/outputPanel.jsf
You can do something with a ValueChangeListener akin to
public void onSelectItem(ValueChangeEvent evt)
{
if("someValue".equals(evt.getNewValue())
showPageOne = true;//boolean
else
showPageTwo = true;//boolean
}
//JSF
<h:form id="myForm">
<h:selectOneMenu valueChangeListener="#{myBean.onSelectItem}" update="myForm">
<f:selectItems value="items">
</h:selectOneMenu>
<p:outputPanel rendered="#{myBean.showPageOne}">
hi I'm page one
</p:outputPanel>
<p:outputPanel rendered="#{myBean.showPageTwo}">
hi I'm page two
</p:outputPanel>
</h:form>
Sorry for the pseudo code, the examples on Primefaces will really help you here. OutputPanel has saved my bacon often. You'll need to specify an update target, but the example is really clear and easy to run. Play with it.
(Also Primefaces is fantastic you'll likely be very happy with their component suite)