I need to output the text that is selected in the selectOneMenu-list. My code is as follows;
<h:selectOneMenu value="#{DataForm.stationed}" id="globalFilter" onchange="carsTable.filter()" style="width:350px;font-size:13px;" >
<f:selectItems value="#{DataForm.listHotel}" var="user" itemValue="#{user[1]}" itemDisabled="false" itemLabel="#{user[1]}" />
<h:outputText value="#{carsTable[1]}" style="width:350px"/>
</h:selectOneMenu>
How do I code this?
EDIT
This Listbox is within a <datatable>
<h:body>
<h:form id="form1" >
<p:dataTable var="car" value="#{DataForm.listHotels}" widgetVar="carsTable" paginator="true" rows="10" onRowSelectComplete="carDialog.show()" emptyMessage="No hospital found with given criteria" selectionMode="single" onRowSelectUpdate="growl" style="width:1400px;font-size:13px;">
<h:selectOneMenu value="#{DataForm.stationed}" id="globalFilter" onchange="carsTable.filter()" style="width:350px;font-size:13px;" >
<f:selectItems value="#{DataForm.listHotel}" var="user" itemValue="#{user[1]}" itemDisabled="false" itemLabel="#{user[1]}" />
<h:outputText value="#{carsTable[1]}" style="width:350px"/>
</h:selectOneMenu>
</p:dataTable>
<f:ajax render= "#form1" >
<h:selectOneMenu value="#{DataForm.stationed}">
<f:selectItems value="#{DataForm.listHotels}" var="item" itemValue="#{DataForm.listHotels}" itemLabel="#{DataForm.listHotels}" />
</h:selectOneMenu>
</f:ajax>
</h:form>
</h:body>
I think you should remove the nested <h:outputText/> first, it doesn't really make sense at that position. Also, from your question and example code, it doesn't really become clear what PrimeFaces has to do with it.
To output the selected value, simply print the expression #{DataForm.stationed}, since this is the binding that will receive the selected value.
The following example demonstrates this via AJAX, but it would work the same way if you used an action and a regular form submit.
Facelet
<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 />
<h:body>
<h:form id="form">
<f:ajax render="form">
<h:selectOneMenu value="#{selectOneMenuBean.value}">
<f:selectItems value="#{selectOneMenuBean.items}" var="item" itemValue="#{item}" itemLabel="#{item}" />
</h:selectOneMenu>
</f:ajax>
Selected value: #{selectOneMenuBean.value}
</h:form>
</h:body>
</html>
Bean
#ViewScoped
#ManagedBean
public class SelectOneMenuBean {
private List<String> items = Arrays.asList("a", "b", "c");
private String value;
public List<String> getItems() {
return items;
}
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
}
}
p.s.
In your code example the EL names for your beans start with a capital. This is a little against the typical conventions. Also, you might want to pay some attention to your names and types. The bean returns something called listHotel, but this is assigned to a variable named user, which is then indexed by an integer. I would recommend aligning names (e.g. collection name = users, variable name user) and using properties instead of indexes (e.g. user.name).
Related
I have multiple dropdown lists using Primefaces 5.0. As you select an option in the first drop down list (in this case a country) then it should grab the cities in that country and populate the city drop down list. However, I have code to populate my cities drop down list from my database using the country but the method is never called.
My Region.xhtml:
<h:form>
<p:tab title="Region Selection" rendered="true">
<p:panel header="Region Information">
<h:panelGrid columns="2" columnClasses="label, value">
<h:outputText value="Country" />
<p:selectOneMenu id="country" value="#{rosterBean.selectedCountry}">
<p:ajax listener="#{rosterBean.onCountryChange()}" update="state" />
<f:selectItem itemLabel="Select Country" itemValue="" noSelectionOption="true" />
<f:selectItems value="#{rosterBean.countries}" />
</p:selectOneMenu>
<h:outputText value="State/ Province" />
<p:selectOneMenu id="state" value="#{rosterBean.selectedState}">
<p:ajax listener="#{rosterBean.onStateChange}" />
<f:selectItem itemLabel="Select State" itemValue="" noSelectionOption="true" />
<f:selectItems value="#{rosterBean.states}" />
</p:selectOneMenu>
<h:outputText value="City" />
<p:selectOneMenu id="city" filter="true" filterMatchMode="contains" >
<f:selectItem itemLabel="Johannesburg" itemValue="0" noSelectionOption="true" />
<f:selectItem itemLabel="Pretoria" itemValue="1" noSelectionOption="true" />
</p:selectOneMenu>
</h:panelGrid>
</p:panel>
</p:tab>
</h:form>
My Bean:
#ViewScoped
#ManagedBean
public class RosterBean implements Serializable {
public void onCountryChange() {
System.out.println("Updating State");
}
}
I have got all my getters and setters, but that system.out is never called. So irrespective if it is going to call the right cities in that country it never gets there.
Your input elements and p:ajax need to be nested within an h:form, otherwise no data is submitted on POST. actionListeners sometimes require access to the submitted value (either through the method parameters or an ActionEvent), so it appears listeners will not be called if the submitted value is not available.
Hint: You can check your browser's developer tools to see what is actually submitted.
See also
JSF: Execute values of multiple forms
How to execute another <h:form> using <f:ajax>?
JSF - actionListener tag calls method which doesn't take an ActionEvent parameter
You seem to still be having some trouble, so here is a complete example, slightly modified from your own:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
</h:head>
<h:body>
<h:form>
<p:panel header="Region Information">
<h:panelGrid columns="2" columnClasses="label, value">
<h:outputText value="Country" />
<p:selectOneMenu id="country" value="#{rosterBean.selectedCountry}" >
<p:ajax listener="#{rosterBean.onCountryChange()}" update="state" />
<f:selectItem itemLabel="Select Country" itemValue="" noSelectionOption="true" />
<f:selectItem itemLabel="Country 1" itemValue="1" />
</p:selectOneMenu>
<h:outputText value="State/ Province" />
<p:selectOneMenu id="state" value="#{rosterBean.selectedState}" >
<p:ajax listener="#{rosterBean.onCountryChange}" />
<f:selectItem itemLabel="Select State" itemValue="" noSelectionOption="true" />
<f:selectItem itemLabel="State1 1" itemValue="1" />
</p:selectOneMenu>
</h:panelGrid>
</p:panel>
</h:form>
<p:commandButton value="Next"/>
</h:body>
</html>
(Note that I deleted the class attribute from the commandButton. class is not a valid attribute on commandButton.)
RosterBean.java
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
#ManagedBean
#ViewScoped
public class RosterBean {
public String selectedCountry;
public String selectedState;
public String getSelectedCountry() {
return selectedCountry;
}
public void setSelectedCountry(String selectedCountry) {
this.selectedCountry = selectedCountry;
}
public String getSelectedState() {
return selectedState;
}
public void setSelectedState(String selectedState) {
this.selectedState = selectedState;
}
public void onCountryChange() {
System.out.println("Updating State");
}
}
I have multiple forms in page and each form have datatables.
When i select the datatable mapped to that control should be shown on the page .
Facing the below exception when developing application using primefaces:
javax.faces.view.facelets.TagAttributeException: //C:/Workspace/Application/WebContent/transfer.xhtml #28,102 rendered="#{transferMB.mySelectedValues('1')}" Error Parsing: #{transferMB.mySelectedValues('1')}
at com.sun.faces.facelets.tag.TagAttributeImpl.getValueExpression(TagAttributeImpl.java:428)
at com.sun.faces.facelets.tag.TagAttributeImpl.getValueExpression(TagAttributeImpl.java:378)
at com.sun.faces.facelets.tag.jsf.ComponentRule$ValueExpressionMetadata.applyMetadata(ComponentRule.java:107)
at com.sun.faces.facelets.tag.MetadataImpl.applyMetadata(MetadataImpl.java:81)
at javax.faces.view.facelets.MetaTagHandler.setAttributes(MetaTagHandler.java:129)
at javax.faces.view.facelets.DelegatingMetaTagHandler.setAttributes(DelegatingMetaTagHandler.java:102)
weblogic.security.acl.internal.AuthenticatedSubject.doAs(AuthenticatedSubject.java:321)
at weblogic.security.service.SecurityManager.runAs(SecurityManager.java:120)
at weblogic.servlet.internal.WebAppServletContext.securedExecute(WebAppServletContext.java:2277)
at weblogic.servlet.internal.WebAppServletContext.execute(WebAppServletContext.java:2183)
at weblogic.servlet.internal.ServletRequestImpl.run(ServletRequestImpl.java:1454)
at weblogic.work.ExecuteThread.execute(ExecuteThread.java:209)
at weblogic.work.ExecuteThread.run(ExecuteThread.java:178)
Caused by: javax.el.ELException: Error Parsing: #{transferMB.mySelectedValues('1')}
at com.sun.el.lang.ExpressionBuilder.createNodeInternal(Unknown Source)
at com.sun.el.lang.ExpressionBuilder.build(Unknown Source)
at com.sun.el.lang.Expres
sionBuilder.createValueExpression(Unknown Source)
at com.sun.el.ExpressionFactoryImpl.createValueExpression(Unknown Source)
at com.sun.faces.facelets.tag.TagAttributeImpl.getValueExpression(TagAttributeImpl.java:412)
... 94 more
You should use comma to separate forms you are going to update like:
<p:ajax update=":transForm, :sprdForm" />
It means there are two forms to be updated.
If you code like:
<p:ajax update=":transForm :sprdForm" />
Means you want to update sprdForm in the transForm, which it not possible since you can't put a form in another form.
You are trying to compare a list with a single String:
rendered="#{transferMB.selectedItems == '1'}"
But instead, you should check if the list INCLUDES this single string:
In the html:
rendered="#{denemeBean.controlSelectedValues('1')}"
In the bean class:
// list should be initialized (unless, we'll get NullPointer
// when using the below method)
private List<String> selectedItems = new ArrayList<>();
// This methods returns true if parameter is included in the
// list of selected items
public boolean controlSelectedValues(String needed) {
for (String string : selectedItems) {
if (string.equals(needed)) {
return true;
}
}
return false;
}
Finally, I'm not sure if you really need to put those datatables inside forms.
Below you can see working copy that I worked on: (of course you should replace outputTexts with your datatables)
// bean file
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
#ManagedBean(name = "denemeBean")
#ViewScoped
public class DenemeBean implements Serializable {
private List<String> selectedItems = new ArrayList<>();
/**
* #return the selectedItems
*/
public List<String> getSelectedItems() {
return selectedItems;
}
/**
* #param selectedItems the selectedItems to set
*/
public void setSelectedItems(List<String> selectedItems) {
this.selectedItems = selectedItems;
}
public boolean controlSelectedValues(String needed) {
for (String string : selectedItems) {
if (string.equals(needed)) {
return true;
}
}
return false;
}
}
// html file:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</h:head>
<h:body>
<h:form>
<h:selectManyCheckbox value="#{denemeBean.selectedItems}">
<f:selectItem itemValue="1" itemLabel="Transfer Status" />
<f:selectItem itemValue="2" itemLabel="Spread Status" />
<f:selectItem itemValue="3" itemLabel="Number1 - 3" />
<p:ajax event="change" update=":tables" />
</h:selectManyCheckbox>
</h:form>
<p:panel id="tables" >
<p:panel id="transForm" rendered="#{denemeBean.controlSelectedValues('1')}">
<h:outputText value="table1 Here" />
</p:panel>
<p:panel id="sprdForm" rendered="#{denemeBean.controlSelectedValues('2')}">
<h:outputText value="table 2 Here" />
</p:panel>
</p:panel>
</h:body>
</html>
Using <p:ajax update=":transForm :sprdForm" /> is totally valid.
You have multiple other issues here.
First point: Your rendered-attribute compares a List with a String (selectedItems=='1'). It should test if the List contains the String (selectedItems.contains('1')). (Attention: You must use EL 2.2 for this)
Second point is: I think <p:panelGrid> needs the columns-attribute.
I stripped down your code and this works fine for me:
<h:body>
<h:form>
<p:selectManyCheckbox value="#{transferMB.selectedItems}">
<f:selectItem itemValue="1" itemLabel="Transfer Status" />
<f:selectItem itemValue="2" itemLabel="Spread Status" />
<f:selectItem itemValue="3" itemLabel="Number1 - 3" />
<p:ajax update=":transForm :sprdForm"/>
</p:selectManyCheckbox>
</h:form>
<h:form id="transForm">
<p:panelGrid columns="1" rendered="#{transferMB.selectedItems.contains('1')}">
transForm
</p:panelGrid>
</h:form>
<h:form id="sprdForm">
<p:panelGrid columns="1" rendered="#{transferMB.selectedItems.contains('2')}">
sprdForm
</p:panelGrid>
</h:form>
</h:body>
I used <p:selectManyCheckbox> because <h:selectManyCheckbox> with inner <p:ajax> resulted in java.lang.ClassCastException: java.lang.Boolean cannot be cast to org.primefaces.component.api.ClientBehaviorRenderingMode. I think this could be a bug in my JSF Implementation jsf-impl-2.1.7-jbossorg-2.jar.
I'm doing a dynamic view according to a dropdown selection:
there's the code:
<h:selectOneMenu value="#{controller.type}" >
<p:ajax listener="#{controller.switchPanels}" update="panels" />
<f:selectItem itemValue="1" itemLabel="option 1" />
<f:selectItem itemValue="2" itemLabel="option 2" />
</h:selectOneMenu>
<h:panelGroup layout="block" id="panels">
<h:panelGroup layout="block" rendered="#{controller.type == '1'}" >
<h:inputText value="#{controller.value}" >
<f:validateRegex pattern="^[0-9a-zA-Z ]*$" />
</h:inputText>
</h:panelGroup>
<h:panelGroup layout="block" rendered="#{controller.type == '2'}" >
Panel 2
</h:panelGroup>
</h:panelGroup>
<h:commandLink action="#{controller.go}">Go</h:commandLink>
The controller:
#ViewScoped
#ManagedBean
public class Controller {
String type = "1";
String value;
// getters and setters
public void switchPanels(AjaxBehaviorEvent event) {
this.value = "";
}
public void go(){
}
...
}
Try this scenario:
- write special characters in the value field
- press Go (causes the validation message to popup)
- try changing the selection and reselect the same panel again
The result is that the field is not cleared even though I clear it in the switchPanels method
Please any explanation would be helpful
Thank you
On complex data input forms it may happen that one needs to edit a form in a form. As this is not possible in JSF2, I wonder what better solution could be found for this problem. Here's an example of what I need:
given: two beans: OuterBean and HobbyBean; a list of HobbyBeans is used in OuterBean
OuterBean is a ManagedBean (in SessionScope)
HobbyBean contains two fields hobby and like
I want to add HobbyBeans on the form of adding a user's name in OuterBean without submitting OuterBean but submitting new values to fill the list. Here's the code example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html">
<h:head>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="2">
<h:outputText value="Name" />
<h:inputText value="#{outerBean.name}" required="true" />
<h:outputText value="Hobbies" />
<h:dataTable id="ht" value="#{outerBean.hobbies}" var="h">
<h:column>
<h:outputText value="#{h.hobby}" />
<f:facet name="footer">
<h:inputText value="#{outerBean.hobby}" required="true" />
</f:facet>
</h:column>
<h:column>
<h:outputText value="#{h.like}" />
<f:facet name="footer">
<h:inputText value="#{outerBean.like}" required="true" />
<h:commandButton action="#{outerBean.addHobby}" value="+" immediate="true">
<f:ajax render="ht" />
</h:commandButton>
</f:facet>
</h:column>
</h:dataTable>
</h:panelGrid>
</h:form>
</h:body>
</html>
Yes, there is no command button for the outer form, but that's not the question here. The commandButton is for the inner form and therefore set attribute immediate = true. Doing this, all fields are NOT checked to be not empty (required-Tag is ignored). But also is the content of this fields ignored and not set into the ajax request. How do I avoid this and send the field values of h.hobby and h.like within the ajax request to the OuterBean?
Here the beans:
#ManagedBean
#SessionScoped
public class OuterBean
{
private List<HobbyBean> hobbies;
private String name;
private String hobby;
private Integer like;
public OuterBean()
{
hobbies = new ArrayList<HobbyBean>();
}
public String addHobby()
{
hobbies.add(new HobbyBean(hobby, like));
System.out.println("hobbies: " + hobbies.toString());
return "";
}
public String submit()
{
System.out.println("name is " + name);
return "";
}
// + getter & setter
}
/* ------------------------------------------------------------------------ */
public class HobbyBean
{
private String hobby;
private Integer like;
public HobbyBean(String hobby, Integer like)
{
this.hobby = hobby;
this.like = like;
}
public String toString()
{
return hobby == null ? "" : hobby.concat(",").concat(like == null ? "" : like.toString());
}
// + getter & setter
}
Now what happens when I add a hobby to the bean is that there is no hobby added because the bean fields hobby and like are not set (the list is empty, log is: "hobbies: []"). How can I make it work?
Well your hobbies is empty because you don't tell the f:ajax what to submit. IF you want to do a partial submit (i guess that's what you want) You can try the following:
<h:form>
<h:panelGrid columns="2">
<h:outputText value="Name" />
<h:inputText value="#{outerBean.name}" required="true" />
<h:outputText value="Hobbies" />
<h:dataTable id="ht" value="#{outerBean.hobbies}" var="h">
<h:column>
<h:outputText value="#{h.hobby}" />
<f:facet name="footer">
<h:inputText id="hobby" value="#{outerBean.hobby}" required="true" />
</f:facet>
</h:column>
<h:column>
<h:outputText value="#{h.like}" />
<f:facet name="footer">
<h:inputText id="like" value="#{outerBean.like}" required="true" />
<h:commandButton action="#{outerBean.addHobby()}" value="+" >
<f:ajax execute="hobby like" render="ht" />
</h:commandButton>
</f:facet>
</h:column>
</h:dataTable>
</h:panelGrid>
</h:form>
As you can see in the code you tell f:ajax wich part of the form needs to be submitted when you push the button. If you check your bean now you will see that only the hobby and like are added to the bean. The name part will not be submitted. You say all fields are not checked. This is because you use immediate=true this skips validation. I would suggest not to use it. Look here for more information about immediate= true http://balusc.blogspot.nl/2006/09/debug-jsf-lifecycle.html#WhenShouldIUseTheImmediateAttribute Hopes this help you.
When using ajax inside a composite component, the ajax feature isn't working. What's wrong with the code?
the composite component:
<composite:interface>
<composite:attribute name="filter" required="true" type="java.lang.String" />
<composite:attribute name="list" required="true" type="java.util.List" />
</composite:interface>
<composite:implementation>
<h:inputText value="#{cc.attrs.filter}">
<f:ajax event="keyup" render="#{cc.clientId}:table#{cc.clientId}" />
</h:inputText>
<h:dataTable id="table#{cc.clientId}" value="#{cc.attrs.list}" var="elem">
<h:column>
<h:outputText value="#{elem}" />
</h:column>
</h:dataTable>
</composite:implementation>
now the bean
#ManagedBean
#SessionScoped
public class Ajaxcc
{
private String filter;
private List<String> list;
public Ajaxcc()
{
list = new ArrayList<String>();
list.add("one");
list.add("two");
list.add("three");
list.add("four");
}
public List<String> getList()
{
List<String> filteredList = new ArrayList<String>();
for (String s : list)
{
if (filter == null || filter.trim().equals(""))
{
filteredList.add(s);
}
else if (s.contains(filter))
{
filteredList.add(s);
}
}
return filteredList;
}
public String getFilter()
{
return filter;
}
public void setFilter(String filter)
{
this.filter = filter;
}
}
now the view:
<h:form>
<myCustomComponent:ajaxcc list="#{ajaxcc.list}" filter="#{ajaxcc.filter}" />
</h:form>
I'm using myfaces 2.1.10, deploying on a tomcat 7.0.39 by maven.
Expected behaviour: the list on the web site should be reduced to one, two and four whenever I press the o - button
Failure: the list isn't reduced.
What could be the solution?
BTW, if I put the content of the composite component into the view, it works correctly:
<h:form>
<h:inputText value="#{ajaxcc.filter}">
<f:ajax event="keyup" render="table" />
</h:inputText>
<h:dataTable id="table" value="#{ajaxcc.list}" var="elem">
<h:column>
<h:outputText value="#{elem}" />
</h:column>
</h:dataTable>
</h:form>
In this case pressing o reduces the list to the expected values. Besides, I found out that the response of the composite component ajax call seems to be "empty" for the data table field values; the response of the direct ajax call contains the new list.
<h:inputText ...>
<f:ajax ...render="#{cc.clientId}:table#{cc.clientId}" />
</h:inputText>
<h:dataTable id="table#{cc.clientId}" ...>
This is unnecessarily clumsy. Both components are in the same naming container (the composite itself!), so the prefix is implicitly already done by the composite itself. The suffix is valid, but just unnecessary. The composite component's own ID already enforces the uniqueness in the context of its parent naming container component. Opening the page in browser, rightclick-view source and observing the IDs in generated HTML output should already have given insights about that.
Just keep it simple:
<h:inputText ...>
<f:ajax ...render="table" />
</h:inputText>
<h:dataTable id="table" ...>
See also:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
Is it possible to update non-JSF components (plain HTML) with JSF ajax?