Primefaces p:tabView: Value of selectOneMenu lost - jsf

I have a problem when I use a p:tabView with dynamic="true", and there is a h:selectOneMenu on one tab, and on the other is a commandLink which is ajax="false". After clicking to the commandLink twice the value of the selectOneMenu is lost.
This problem does not occur when the tabView is dynamic="false".
The value of the h:inputText is not lost, but I see the following warning in the logfile:
org.apache.myfaces.shared.renderkit.html.HtmlRendererUtils decodeUIInput WARNING: There should always be a submitted value for an input if it is rendered, its form issubmitted, and it was not originally rendered disabled or read-only. You cannot submit a form after disabling an input element via javascript. Consider setting read-only to true instead or resetting the disabled value back to false prior to form submission. Component : {Component-Path : [Class: javax.faces.component.UIViewRoot,ViewId: /form/regional/region.xhtml][Class: javax.faces.component.html.HtmlBody,Id: j_id_5][Class: javax.faces.component.html.HtmlForm,Id: TestForm][Class: org.primefaces.component.tabview.TabView,Id: tabviewTest][Class: org.primefaces.component.tabview.Tab,Id: j_id_8][Class: javax.faces.component.html.HtmlInputText,Id: j_id_f]}
Here is the form:
<p:tabView dynamic="true" cache="true" id="tabviewTest">
<p:tab title="Tab 1">
<h:selectOneMenu value="#{Region.dropDownValue}" id="dropDown">
<f:selectItem itemLabel="" itemValue=""/>
<f:selectItem itemLabel="1" itemValue="1"/>
<f:selectItem itemLabel="2" itemValue="2"/>
<f:selectItem itemLabel="3" itemValue="3"/>
<f:selectItem itemLabel="4" itemValue="4"/>
</h:selectOneMenu>
<h:inputText value="#{Region.inputValue}" />
</p:tab>
<p:tab title="Tab 2">
<p:commandLink ajax="false"
id="link"
value="Test"
actionListener="#{Region.someActionMethod}" />
</p:tab>
</p:tabView>
And here the Bean:
public class Region {
private Integer dropDownValue = 3;
private String inputValue = "Test";
public void someActionMethod(ActionEvent ev) {
System.out.println("someActionMethod called");
}
public Integer getDropDownValue() {
return dropDownValue;
}
public void setDropDownValue(Integer dropDownValue) {
this.dropDownValue = dropDownValue;
}
public String getInputValue() {
return inputValue;
}
public void setInputValue(String inputValue) {
this.inputValue = inputValue;
}
}
My Environment: Primefaces 5.0/5.1.RC1, Myfaces 2.1/2.2, Tomact 7
Any ideas what could be wrong?

What scope does your ManagedBean have?
When you use a RequestScope you are not able to submit your selectOneMenu with an UICommand component like p:commandLink when you set the ajax attribute to false. The changes are lost in this case.
Here are two possibilities to fix your problem:
Attempt 1: Set your Bean ViewScoped:
In most cases this will work. If you must use special annotations to annotate your beans (like Apache DeltaSpike #ViewAccessScoped for example), try to separate your bean into View and Controller beans, annotating the View with just simple #ViewScope and keeping all the values in it.
Attempt 2: Remove ajax="false" from p:commandLink:
This will work if your use-case allows it. For example, downloading a file with PrimeFaces will require explicit declaration that the ajax is not to be used, so this solution will not be applicable.

add ajax listener
<h:selectOneMenu value="#{Region.dropDownValue}" id="dropDown">
<f:selectItem itemLabel="" itemValue=""/>
<f:selectItem itemLabel="1" itemValue="1"/>
<f:selectItem itemLabel="2" itemValue="2"/>
<f:selectItem itemLabel="3" itemValue="3"/>
<f:selectItem itemLabel="4" itemValue="4"/>
<p:ajax event="change" update="#this"/>
</h:selectOneMenu>

Related

Reset selectoneMenu with another selectOneMenu without ajax

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

Invoke action method on click of h:selectOneMenu

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"%>

primefaces selectOneMenu how to reload

I use 3 selectOneMenu components in my project. I need to reload content of the second after change in the first. Here are some parts of the files
index.xhtml
<h:form id="form">
<p:selectOneMenu id="Rząd" value="#{birdSelectorBean.selectedState}" effect="fade"
style="width: 150px;">
<f:selectItem itemLabel="Rząd" itemValue="" />
<f:selectItems value="#{birdSelectorBean.rzad}" />
<p:ajax render="#form" listener="#{birdSelectorBean.stateChangeListener}" />
</p:selectOneMenu>
<p:selectOneMenu id="rodzina" value="#{birdSelectorBean.selectedState}" effect="fade"
style="width: 150px;">
<f:selectItem itemLabel="Rodzina" itemValue="" />
<f:selectItems value="#{birdSelectorBean.rodzina}" />
</p:selectOneMenu>
<p:selectOneMenu id="rodzaj" value="#{birdSelectorBean.selectedState}" effect="fade"
style="width: 150px;">
<f:selectItem itemLabel="Rodzaj" itemValue="" />
<f:selectItems value="#{birdSelectorBean.rodzaj}" />
</p:selectOneMenu>
</h:form>
BirdSelectionBean.java:
public class BirdSelectorBean
{
private String selectedState;
private List<SelectItem> rzad;
private List<SelectItem> rodzina;
private List<SelectItem> rodzaj;
public BirdSelectorBean()
{
rzad = new ArrayList<>();
rzad.add(new SelectItem("Rząd_X"));
rzad.add(new SelectItem("Rząd_Y"));
rzad.add(new SelectItem("Rząd_Z"));
rodzina = new ArrayList<>();
rodzaj = new ArrayList<>();
}
public void stateChangeListener(ValueChangeEvent event)
{
rodzina.clear();
rodzina.add(new SelectItem("Rodzina_A"));
rodzina.add(new SelectItem("Rodzina_B"));
rodzina.add(new SelectItem("Rodzina_C"));
}
...
getters and setters
...
}
I read many topics on that but it doesn't work for me. I tried update="rodzina" like it is in example
here
and render option like it is said in that
topic:
But it still doesn't work. Please help me :]
In the p:ajax tag change render="#form" to update="#form". Render is used by f:ajax, primefaces use another name for some reason - see here.
Looks like your stateChangeListener method nevers get called and more important, your managed bean looks like hasn't any scope (at least from your question content), remember that it must be at least #ViewScoped in order to make this work. Also, another problem in your code is that you're using the same attribute to select the data for the three <p:selectOnuMenu> (which is not a problem yet since you haven't achieved what you wanted to begin with).
To make the ajax update work, remove the parameter from your stateChangeListener. Also let's add the other two attributes for the selected items from the dropdownlists.
#ManagedBean
#ViewScoped
public class BirdSelectorBean {
private String selectedState;
private String selectedStateRodzina;
private String selectedStateRodzaj;
//other fields and methods...
public void stateChangeListener() {
rodzina.clear();
rodzina.add(new SelectItem("Rodzina_A"));
rodzina.add(new SelectItem("Rodzina_B"));
rodzina.add(new SelectItem("Rodzina_C"));
}
}
And then update your desired <p:selectOneMenu> in your <p:ajax> call (I removed the non-directly related to the problem attributes from the components like style):
<p:selectOneMenu id="Rząd" value="#{birdSelectorBean.selectedState}">
<f:selectItem itemLabel="Rząd" itemValue="" />
<f:selectItems value="#{birdSelectorBean.rzad}" />
<p:ajax update="rodzina" listener="#{birdSelectorBean.stateChangeListener}" />
</p:selectOneMenu>
<p:selectOneMenu id="rodzina" value="#{birdSelectorBean.selectedStateRodzina}">
<f:selectItem itemLabel="Rodzina" itemValue="" />
<f:selectItems value="#{birdSelectorBean.rodzina}" />
</p:selectOneMenu>

conditional rendered f:selectItem possible problems

I have a page with several h:selectOneMenu or p:selectOneMenu and I want to use the same page for editing and adding data.
When I will edit data I need f:selectItem. I know that this component doesn't have attribute rendered. And I read that I can use <c:if>.
Ok. For example, if I write
<p:selectOneMenu rendered="#{not empty bean.id}"
value="#{bean.selectedId}">
<c:if test="${editableBean != null}">
<f:selectItem itemLable="#{editableBean.name} itemValue=#{editableBean.id} />
</c:if>
<f:selectItems value="#{bean.listItems}" var="item"
itemLabel="#{item.name}" itemValue="#{item.id}"/>
</p:selectOneMenu>
Will it works without any problems in primefaces and with ajax listeners?
The easy solution (but with poor performance) will be to have a boolean editMode attribute in your managed bean to enable/disable the components. Basic example:
<p:selectOneMenu rendered="#{not empty bean.id}" disabled="#{bean.editMode}"
value="#{bean.selectedId}">
<f:selectItems value="#{bean.listItems}" var="item"
itemLabel="#{item.name}" itemValue="#{item.id}"/>
</p:selectOneMenu>
In your bean
#ManagedBean
#ViewScoped
public class Bean {
private int id;
private boolean editMode;
//other attributes...
//getters and setters...
#PostConstruct
public void init() {
//a way to know if the bean it's in edit mode
editMode = (id != 0);
}
}
This solution will have poor performance because every <p:selectOneMenu> will have to load all the data and then select the actual value, but it will do what you want. Another option will be to use this attribute for the rendered property of <p:selectOneMenu> and for an <h:inputText disabled="true" readonly="true" /> (or maybe <h:outputText />). Another basic sample:
<p:selectOneMenu rendered="#{not empty bean.id && not bean.editMode}"
value="#{bean.selectedId}">
<f:selectItems value="#{bean.listItems}" var="item"
itemLabel="#{item.name}" itemValue="#{item.id}"/>
</p:selectOneMenu>
<h:inputText rendered="#{bean.editMode}" value="{bean.selectedText}"
disabled="true" readonly="true" />

using JSF binding + validator in the same component display message twice

I have 2 components(select and inputText), in which values are dependent to each other. For example if "option 1" is selected then inputText must be numbers.
In my bean I have added attributes for 2 components for binding and a validation method, while in jsp i have added "validator" and "binding" attribute to select and "binding" to inputText.
I used binding to get the submitted value of both components for validation.
Is this the correct way? Is there an alternative to get the submitted value?
The result of doing this is duplicate message shown. If I remove binding attribute from select then it works as expected but I cannot fetch the selected value, rather is uses the cache value (bean value in session).
Thanks in advance.
aalmero
code:
<p:selectOneMenu
value="# {deploymentRequestViewBean.deploymentRequestDTO.deploymentRequest.requestLevel}"
id="requestLevel" required="true" label="requestLevel"
validator="#{deploymentRequestViewBean.validateRequestDate}">
<p:ajax listener="#{deploymentRequestViewBean.processRequestLevelValueChanged}"
binding="#{deploymentRequestViewBean.requestLevelSelectOne}"/>
<f:selectItem itemValue="" itemLabel="Select One" />
<f:selectItem itemValue="DEV" itemLabel="DEV" />
<f:selectItem itemValue="QUA" itemLabel="QUA" />
<f:selectItem itemValue="PRD" itemLabel="PRD" />
</p:selectOneMenu>
<p:calendar
value="#{deploymentRequestViewBean.deploymentRequestDTO.deploymentRequest.deployDate}"
id="deployDate" required="true" label="deployDate" showOn="button" pattern="yyyy- MM-dd" binding="#{deploymentRequestViewBean.requestDateInput}"/>
<p:spacer width="10" height="10" />
//for component-binding
private UISelectOne requestLevelSelectOne;
private UIInput requestDateInput;
//validation method
public void validateRequestDate(FacesContext facesContext,
UIComponent component, Object newValue){
//get the current value of select;
requestLevelSelectOne.getSubmittedValue();
//get the current vallue of input;
requestDateInput.getSubmittedValue()
if(not valid combination){
facesContext.addMessage(requestDateInput.getClientId(facesContext), new FacesMessage(FacesMessage.SEVERITY_ERROR, "Error", selectedLevel + " deployment request requires at least 2 days."));
throw new ValidatorException(new FacesMessage(FacesMessage.SEVERITY_ERROR, "Error", "Deployment date must be at least 2 days."));
}
}
You can use a hack bypass by binding a hidden component value with the select component. In the "onchange" method of your <h:selectOneMenu> you can set the value of this hidden component and get the values in the server:
<h:form id="myForm">
<h:selectOneMenu id="cmbOptions"
onchange="document.getElementById('myForm:hidSelectOption').value=this.value">
<f:selectItem itemLabel="Option 1" itemValue="1" />
<f:selectItem itemLabel="Option 2" itemValue="2" />
<f:selectItem itemLabel="Option 3" itemValue="3" />
</h:selectOneMenu>
<h:inputHidden id="hidSelectOption" value="#{bean.selectedOption}" />
<h:commandButton value="Click me" action="#{bean.someAction}" />
</h:form>
The managed Bean
#RequestScope
#ManagedBean
public class Bean {
private String selectedOption;
//getters and setters...
public Bean() {
}
public void someAction() {
//showing the actual value of the hidden component...
//remember that you should use a logger, this is a basic example
System.out.println(selectedOption);
}
}

Resources