In my application i added java autocomplete to searchitem.
This item is working good. But it s not working after create row.
i recorded video to youtube.
https://www.youtube.com/watch?v=0FM52YNsDZY
page :
<p:autoComplete id="autocomplete" dropdown="true" value="#{126Controller.tesisAuto}" var="auto"
completeMethod="#{211Controller.complete}" forceSelection="true"
itemLabel="#{auto.tesisAdi}" itemValue="#{auto}">
<f:facet name="itemtip">
<h:panelGrid columns="2" cellpadding="5">
<h:outputText value="Tesis Adı: "/>
<h:outputText value="#{auto.tesisAdi}"/>
<h:outputText value="Şeflik Adı: "/>
<h:outputText value="#{211Controller.getSeflik(auto.seflikKodu)}"/>
<h:outputText value="Adres: "/>
<h:outputText value="#{auto.adres}"/>
</h:panelGrid>
</f:facet>
<p:ajax event="itemSelect" listener="#{126Controller.itemByTesisAuto()}" update=":126ListForm:display"/>
</p:autoComplete>
Complete method:
public List<211> complete(String query) {
return autoComplete(query);
}
public List<211> autoComplete(String auto){
List<211> completed = new ArrayList<211>();
for (211 m211: this.getFacade().getTesisByYetkiIsyeriKodu(yetkiSeflik)){
if(m211.getTesisAdi().startsWith(auto.toUpperCase())){
completed.add(m211);
}
}
return completed;
}
Create method:
public void create() {
persist(PersistAction.CREATE, "Oluşturma");
if (!JsfUtil.isValidationFailed()) {
items = null; // Invalidate list of items to trigger re-query.
}
}
Thanks god.
I solved. I added h:head and worked.
Thank u so much.
<p:panelGrid id="sef" columns="1" style="width: 100%">
<h:head>
<h:form>
<h:panelGrid columns="2" style="width: 100%">
<h:outputText value="Şeflik Seçiniz : " style="width: 20%" rendered="#{211Controller.yetkiliSeflikSayisi gt 1}"/>
<p:selectOneMenu id="seflik" value="#{211Controller.yetkiSeflik}" effect="fold" rendered="#{211Controller.yetkiliSeflikSayisi gt 1}" >
<f:selectItem itemLabel="Seçiniz" itemValue=""/>
<f:selectItems value="#{211Controller.list}"/>
<p:ajax update="autocomplete"/>
</p:selectOneMenu>
<h:outputText value="Tesis Seçiniz : " style="width: 20%"/>
<p:autoComplete id="autocomplete" dropdown="true" value="#{126Controller.tesisAuto}" var="auto"
completeMethod="#{211Controller.complete}" forceSelection="true"
itemLabel="#{auto.tesisAdi}" itemValue="#{auto}">
<f:facet name="itemtip">
<h:panelGrid columns="2" cellpadding="5">
<h:outputText value="Tesis Adı: "/>
<h:outputText value="#{auto.tesisAdi}"/>
<h:outputText value="Şeflik Adı: "/>
<h:outputText value="#{211Controller.getSeflik(auto.seflikKodu)}"/>
<h:outputText value="Adres: "/>
<h:outputText value="#{auto.adres}"/>
</h:panelGrid>
</f:facet>
<p:ajax event="itemSelect" listener="#{126Controller.itemByTesisAuto()}" update=":126ListForm:display :126ListForm:sef"/>
</p:autoComplete>
</h:panelGrid>
</h:form>
</h:head>
</p:panelGrid>
Related
I am using primefaces 5.0 and Weblogic application server and JSF2.0.
Question : how to Clear dropdown Filtering in p:datatable .
My Code : XHTml :
<p:column rowspan="3" style="text-align: center; width:80px;"
filterBy="#{monitorLookUpdata.status}"
sortBy="#{monitorLookUpdata.status}"
filterMatchMode="contains" filterMaxLength="9" id="statusId"
filterStyle="width:80%;">
<f:facet name="header">
<br/><br/>
<h:outputText value="Status" />
</f:facet>
<f:facet name="filter">
<h:selectOneMenu onchange="PF('monitorLookUp').filter()" class="ui-simple-text">
<f:selectItem itemLabel="" itemValue="" noSelectionOption="true" />
<f:selectItem itemLabel="Open" itemValue="Open" />
<f:selectItem itemLabel="Delivered" itemValue="Delivered" />
<f:selectItem itemLabel="Closed" itemValue="Closed" />
</h:selectOneMenu>
</f:facet>
</p:column>
Java Code :
FacesContext.getCurrentInstance().getExternalContext().getSessionMap().remove("filteredData");
<p:column rowspan="3" style="text-align: center; width:80px;"
filterBy="#{monitorLookUpdata.status}"
filterOptions="#{monitorLookupHandler.options}"
sortBy="#{monitorLookUpdata.status}"
filterMatchMode="contains" filterMaxLength="9" id="statusId"
filterStyle="width:80%;">
<f:facet name="header">
<br/><br/>
<h:outputText value="Status" />
</f:facet>
</p:column>
And Java Code will be :
private SelectItem[] options;
options = new SelectItem[4];
options[0] = new SelectItem(" ", " ");
options[1] = new SelectItem("Open", "Open");
options[2] = new SelectItem("Delivered", "Delivered");
options[3] = new SelectItem("Closed", "Closed");
Now above code working as expected . Thanks All .
When "selectOneMenu" is placed in the "dataTable" column header it:
1) triggers row sorting everytime it is opened or after the button next to it is clicked and "selectOneMenu" is opened (it shouldn't be like that);
2) fails to assign value to the backing bean.
How can "selectOneMenu" be attached to the column header so that these problems wouldn't occur?
*.xhtml code with dataTable which causes 1) and 2) problems:
<h:form id="someForm0">
<p:dataTable id="sdt" var="variable" value="#{otherBean.tableModel}" rows="10">
<p:column sortBy="#{variable.name}" filterBy="#{variable.name}" filterMatchMode="contains" >
<f:facet name="header">
<h:outputText value="Name"/>
<h:panelGrid columns="2" cellpadding="1">
<p:selectOneMenu id="abc" value="#{userBean.someChars}">
<f:selectItem itemLabel="" itemValue="select" />
<f:selectItem itemLabel="AAA" itemValue="AAA" />
<f:selectItem itemLabel="BBB" itemValue="BBB" />
<f:selectItem itemLabel="CCC" itemValue="CCC" />
</p:selectOneMenu>
<h:commandButton id="btn" value="Submit" type="submit" action="#{userBean.submitChars}"/>
</h:panelGrid>
</f:facet>
<h:outputText value="#{variable.name}"/>
</p:column>
</p:dataTable>
</h:form>
Backing bean code:
#ManagedBean
public class UserBean
{
private String someChars;
public String getSomeChars()
{
return someChars;
}
public void setSomeChars(String someChars)
{
this.someChars = someChars;
}
public String submitChars()
{
if(getSomeChars() != null)
{
System.out.println("Selected chars are: " + getSomeChars());
}
else
{
System.out.println("Selected chars are equal to null!");
}
return null;
}
}
Here is fragment of the previously mentioned *.xhtml code, and selectOneMenu works just great when placed into the basic form:
<h:form id="someForm">
<p:selectOneMenu id="abc" value="#{userBean.someChars}">
<f:selectItem itemLabel="" itemValue="select" />
<f:selectItem itemLabel="AAA" itemValue="AAA" />
<f:selectItem itemLabel="BBB" itemValue="BBB" />
<f:selectItem itemLabel="CCC" itemValue="CCC" />
</p:selectOneMenu>
<h:commandButton id="btn" value="Submit" type="submit" action="#{userBean.submitChars}"/>
</h:form>
I think the last resort would be adding elements from the dataTable column header to the dataTable header:
<h:form id="someForm1">
<p:dataTable id="sdt" var="variable" value="#{otherBean.tableModel}" rows="10">
<f:facet name="header">
<h:panelGrid columns="2" cellpadding="1">
<p:selectOneMenu id="abc" value="#{userBean.someChars}">
<f:selectItem itemLabel="" itemValue="select" />
<f:selectItem itemLabel="AAA" itemValue="AAA" />
<f:selectItem itemLabel="BBB" itemValue="BBB" />
<f:selectItem itemLabel="CCC" itemValue="CCC" />
</p:selectOneMenu>
<h:commandButton id="btn" value="Submit" type="submit" action="#{userBean.submitChars}"/>
</h:panelGrid>
</f:facet>
<p:column sortBy="#{variable.name}" filterBy="#{variable.name}" filterMatchMode="contains" >
<f:facet name="header">
<h:outputText value="Name"/>
</f:facet>
<h:outputText value="#{variable.name}"/>
</p:column>
</p:dataTable>
</h:form>
Try as below :
<h:form id="someForm0">
<p:dataTable id="sdt" ...>
<p:column headerText="header">
<p:selectOneMenu id="abc" value="#{userBean.someChars}">
<f:selectItem itemLabel="" itemValue="select" />
<f:selectItem itemLabel="AAA" itemValue="AAA" />
<f:selectItem itemLabel="BBB" itemValue="BBB" />
<f:selectItem itemLabel="CCC" itemValue="CCC" />
<p:ajax event="valueChange" update=":someForm0:sdt"/>
</p:selectOneMenu>
</p:column>
</p:dataTable>
<h:commandButton ....>
</h:form>
UserBean.java
private String someChars;
public String getSomeChars() {
return someChars;
}
public void setSomeChars(Stirng someChars) {
this.someChars = someChars;
}
I'm working with Primefaces 3.4, Apache Tomcat 7 and Java EE. I read the GoogleMaps API but I can't get this feature to work.
I have a PrimeFaces input box, and when i write an address on it, i want to suggest other addresses provided by GoogleMaps library.
Nothing happens when a put the JavaScript code on my XHTML. I have the library of GoogleMaps too.
This is my XHTML:
<ui:composition 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">
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initia(domicilioDesde, domicilioHasta) {
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var oldDirections = [];
var currentDirections = null;
var cordoba = " ,Cordoba, Argentina";
var direccion = domicilioDesde; /* '#{busquedaplayaMB.direccionDesde}'; */
var start = direccion.concat(cordoba);
var fin = domicilioHasta; /*'#{busquedaplayaMB.playaselected.domicilio}';*/
var end = fin.concat(cordoba);
var request = {
origin : start,
destination : end,
travelMode : google.maps.DirectionsTravelMode.DRIVING
}
var myOptions = {
zoom : 13,
center : new google.maps.LatLng(#{busquedaplayaMB.latitudCentro},#{busquedaplayaMB.longitudCentro}),
mapTypeId : google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
directionsDisplay = new google.maps.DirectionsRenderer({
'map' : map,
'preserveViewport' : true,
'draggable' : true
});
directionsDisplay.setPanel(document
.getElementById("directions_panel"));
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
dlg2.show();
}
function undo() {
currentDirections = null;
directionsDisplay.setDirections(oldDirections.pop());
if (!oldDirections.length) {
setUndoDisabled(true);
}
}
function setUndoDisabled(value) {
document.getElementById("undo").disabled = value;
}
</script>
<h:form id="form">
<p:growl id="messages" showSummary="false" autoUpdate="true"
globalOnly="true" />
<div align="left" style="margin: 10px 0 10px 0;">
<p:panel>
<h:panelGrid columns="1" width="100%" cellspacing="5"
cellpadding="5">
<h:panelGrid columns="2" width="80%">
<p:column style="vertical-align:text-center;">
<h:panelGrid columns="2">
<p:column>
<p:watermark for="direccionBusqueda"
value="Dirección de búsqueda" />
<p:inputText id="direccionBusqueda"
value="#{busquedaplayaMB.direccionBusqueda}" required="true"
requiredMessage="Campo dirección de búsqueda obligatorio"
style="width:250px;">
<p:ajax event="blur" update="direccionBusquedaMsg" />
</p:inputText>
</p:column>
<p:column>
<p:message id="direccionBusquedaMsg" display="icon"
for="direccionBusqueda" />
</p:column>
</h:panelGrid>
</p:column>
<p:column>
<div align="center">
<h:outputLabel value="N° de cuadras: " />
<h:outputLabel id="nroCuadras"
value="#{busquedaplayaMB.distancia}" />
<h:inputHidden id="distancia"
value="#{busquedaplayaMB.distancia}" />
<p:slider for="distancia" minValue="1" maxValue="50"
style="width:100px;" update="nroCuadras" display="nroCuadras" />
</div>
</p:column>
</h:panelGrid>
<h:panelGrid columns="5" cellspacing="5" cellpadding="5"
width="100%">
<p:column style="vertical-align:text-center;">
<p:selectOneMenu value="#{busquedaplayaMB.categoriaParameter}"
effect="fade" style="width:160px;height:25px;line-height:17px;">
<f:selectItem itemLabel="Todas las categorías"
itemValue="#{null}" />
<f:selectItems
value="#{categoriaVehiculoMB.categoriaVehiculoList}"
var="categoria" itemValue="#{categoria}"
itemLabel="#{categoria.nombre}" />
<f:converter converterId="categoriaVehiculoConverter" />
</p:selectOneMenu>
</p:column>
<p:column style="vertical-align:text-center;">
<p:selectOneMenu value="#{busquedaplayaMB.tipoEstadiaParameter}"
effect="fade" style="width:160px;height:25px;line-height:17px;">
<f:selectItem itemLabel="Todas los tipos estadías"
itemValue="#{null}" />
<f:selectItems value="#{tipoEstadiaMB.tipoEstadiaList}"
var="tipoEstadia" itemValue="#{tipoEstadia}"
itemLabel="#{tipoEstadia.nombre}" />
<f:converter converterId="tipoEstadiaConverter" />
</p:selectOneMenu>
</p:column>
<p:column style="vertical-align:text-center;">
<div align="right">
<h:panelGrid columns="2">
<p:selectBooleanCheckbox id="check"
value="#{busquedaplayaMB.checkPromociones}" />
<p:outputLabel for="check" value="Sólo con promociones" />
</h:panelGrid>
</div>
</p:column>
<p:column>
<div align="right">
<p:commandButton id="btnBuscarAvanzado" update="playas,mapa"
value="Buscar" action="#{busquedaplayaMB.busquedaAvanzada}"
ajax="false" icon="ui-icon-search" style="width:85px;" />
</div>
</p:column>
</h:panelGrid>
</h:panelGrid>
</p:panel>
</div>
<div>
<p:panel>
<f:view contentType="text/html">
<!-- <h1>Playas encontradas:</h1> -->
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<p:gmap center="#{busquedaplayaMB.coordenadas}" zoom="14"
type="ROADMAP" model="#{busquedaplayaMB.advancedModel}"
style="width:99,5%; height:350px;">
<p:ajax event="overlaySelect"
listener="#{busquedaplayaMB.onMarkerSelect}" />
<p:gmapInfoWindow>
<ui:fragment
rendered="#{busquedaplayaMB.marker.data.playa == null}">
<div align="center">
<ui:fragment rendered="#{busquedaplayaMB.usuario == null}">
<h:outputText style="font-weight:bold;" value="¡Usted está aquí!" />
</ui:fragment>
<ui:fragment rendered="#{busquedaplayaMB.usuario != null}">
<h:panelGrid column="1" style="text-align:center;"
cellspacing="0px" cellpadding="0px">
<p:column>
<h:graphicImage library="fotos_perfil_usuarios"
name="sinfoto.jpg"
styleClass="bordes-foto-perfil-comentario"
rendered="#{busquedaplayaMB.usuario.fotoUsuario == null}" />
<h:graphicImage library="fotos_perfil_usuarios"
name="#{busquedaplayaMB.usuario.nombreUser}.jpg"
styleClass="bordes-foto-perfil-comentario"
rendered="#{busquedaplayaMB.usuario.fotoUsuario != null}" />
</p:column>
<p:column>
<h:outputText style="font-weight:bold;"
value="#{busquedaplayaMB.usuario.nombre} #{busquedaplayaMB.usuario.apellido}" />
</p:column>
<p:column>
<h:link id="linkUsuario" tittle="Ir a mi perfil"
value="Ir a mi perfil" outcome="/cliente/perfilcliente" />
</p:column>
</h:panelGrid>
</ui:fragment>
</div>
</ui:fragment>
<ui:fragment
rendered="#{busquedaplayaMB.marker.data.playa != null}">
<div align="center">
<h:panelGrid column="1" style="text-align:center;"
cellspacing="0px" cellpadding="0px">
<p:column>
<h:graphicImage library="fotos_perfil_playas"
name="#{busquedaplayaMB.marker.data.id}_#{busquedaplayaMB.marker.data.nombreFoto}"
styleClass="bordes-foto-perfil-comentario"
rendered="#{busquedaplayaMB.marker.data.nombreFoto != null}" />
<h:graphicImage library="fotos_perfil_playas"
name="sinfoto.jpg"
styleClass="bordes-foto-perfil-comentario"
rendered="#{busquedaplayaMB.marker.data.nombreFoto == null}" />
</p:column>
<h:outputText style="font-weight:bold;"
value="#{busquedaplayaMB.marker.data.playa.nombreComercial}" />
<h:outputText
value="#{busquedaplayaMB.marker.data.playa.domicilio} - #{busquedaplayaMB.marker.data.playa.barrio.nombre}" />
<h:link id="link" tittle="Ir a playa" value="Ver información"
outcome="/viewperfilplaya.html?id=#{busquedaplayaMB.marker.data.playa.id}" />
</h:panelGrid>
</div>
</ui:fragment>
</p:gmapInfoWindow>
</p:gmap>
</f:view>
</p:panel>
</div>
<div style="margin: 5px;">
<p:dataTable id="playas" var="playa" paginator="true"
paginatorPosition="bottom" rows="5"
emptyMessage="¡No existen playas!"
value="#{busquedaplayaMB.playaResultadoBusqueda}">
<p:column headerText="Nombre Comercial" styleClass="column-font">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{playa.nombreComercial}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{playa.nombreComercial}"
styleClass="input-font" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Barrio" styleClass="column-font">
<h:outputText value="#{playa.barrio.nombre}" />
</p:column>
<p:column headerText="Domicilio" styleClass="column-font">
<h:outputText value="#{playa.domicilio}" />
</p:column>
<p:column headerText="Perfil" style="text-align:center; width:50px;">
<h:link id="verPerfil" title="Ver perfil"
outcome="/viewperfilplaya.html?id=#{playa.id}">
<h:graphicImage library="images/icons" name="go.png" />
</h:link>
</p:column>
<p:column headerText="Ruta" style="text-align:center; width:50px;">
<p:commandLink id="view2" oncomplete="dlgOrigen.show();"
title="¿Cómo llegar a esta playa?" update=":dlgO" process="#this">
<f:setPropertyActionListener value="#{playa}"
target="#{busquedaplayaMB.playaselected}" />
<h:graphicImage library="images/icons" name="search-map.png"
style="height:40px; width:40px" />
</p:commandLink>
</p:column>
</p:dataTable>
</div>
<!-- </h:form> -->
<p:dialog widgetVar="dlg2" width="800" height="400" modal="true"
id="dialog" draggable="false" closable="true">
<!-- <h:form id="frmComoLlegar"> -->
<f:facet name="header">
<h:outputText value="¿Cómo llegar a la playa?" />
</f:facet>
<div id="map_canvas" style="float: left; width: 65%; height: 100%"></div>
<div style="float: right; width: 35%; height: 100%; overflow: auto">
<div id="directions_panel" style="width: 100%"></div>
</div>
<f:facet name="footer" style="text-align=right;">
<p:commandButton id="undo" value="Volver"
style="float:right; width:274px; height: 42px" onclick="undo();"></p:commandButton>
</f:facet>
</p:dialog>
</h:form>
<p:dialog header="Dirección de origen" id="dlgO" widgetVar="dlgOrigen"
resizable="false" closable="true">
<h:form id="frmComoLlegar">
<h:panelGrid columns="2" cellspacing="10" cellpadding="10">
<h:outputLabel for="dirOrigen" value="Dirección de origen: " />
<p:inputText id="dirOrigen" required="true"
value="#{busquedaplayaMB.direccionDesde}"
onkeyup="if (event.keyCode == 13) { document.getElementById(':frmComoLlegar:siguiente').click(); return false; }" />
<p:column />
<p:column>
<div align="right">
<p:commandButton id="siguiente" value="Siguiente" ajax="true"
onclick="initia(jQuery('#frmComoLlegar\\:dirOrigen').val(), '#{busquedaplayaMB.playaselected}');"
update=":dialog" process="#this"
action="#{busquedaplayaMB.tomarDomicilioDesde}" />
</div>
</p:column>
</h:panelGrid>
</h:form>
</p:dialog>
I have implemented this feature using GMap3 jQuery Plugin (also in combination with JSF + Primefaces). See this for an example: https://github.com/jbdemonte/gmap3/blob/master/examples/autocomplete/autocomplete.html
I am designing a web page in which there is a rich:DataTable which I am using to add new customer information in the Database .
So each time a click the "Add New" button, a new row should appear in the rich datatable with Blank Input Text Fields .
Problem : Even how many times I am clicking the "Add New" Button, there remains only one row in table .
Following is the code of my web page :
<a4j:outputPanel id="rep" rendered="#{adminBean.currentItem == 'Participant' || adminBean.currentItem == 'Administrator'}">
<rich:panel rendered="#{not empty adminBean.currentItem}" header="Add Customer" id="out">
<h:panelGrid columns="2">
<h:commandButton value="Add New" type="button" style="width: 70px" actionListener="#{adminBean.addCustAction}">
<a4j:ajax render="out"/>
</h:commandButton>
<a4j:commandButton value="Delete" style="margin-left: 10px; width: 70px"></a4j:commandButton>
</h:panelGrid>
<rich:dataScroller for="setcust" style="margin-top: 17px"></rich:dataScroller>
<rich:dataTable id="setcust" value="#{adminBean.customerList}" var="custl" rows="10" style="width: 900px;margin-top: 5px">
<rich:column id="col1">
<f:facet name="header">
<h:outputText value="Customer ID" style="font-size: smaller; font-weight: bolder; "/>
</f:facet>
<h:inputText value="#{custl.Id}"></h:inputText>
</rich:column>
<rich:column id="col2">
<f:facet name="header">
<h:outputText value="First Name" style="font-size: smaller; font-weight: bolder;"/>
</f:facet>
<h:inputText value="#{custl.FirstName}"></h:inputText>
</rich:column>
<rich:column id="col3">
<f:facet name="header">
<h:outputText value="Last Name" style="font-size: smaller; font-weight: bolder;"/>
</f:facet>
<h:inputText value="#{custl.lastName}"></h:inputText>
</rich:column>
<rich:column id="col4">
<f:facet name="header">
<h:outputText value="Phone" style="font-size: smaller; font-weight: bolder;"/>
</f:facet>
<h:inputText value="#{custl.phoneNo}"></h:inputText>
</rich:column>
<rich:column id="col5">
<f:facet name="header">
<h:outputText value="Address" style="font-size: smaller; font-weight: bolder;"/>
</f:facet>
<h:inputText value="#{custl.address}"></h:inputText>
</rich:column>
<rich:column id="col6">
<f:facet name="header">
<h:outputText value="City" style="font-size: smaller; font-weight: bolder;"/>
</f:facet>
<h:inputText value="#{custl.city}"></h:inputText>
</rich:column>
<rich:column id="col7">
<f:facet name="header">
<h:outputText value="Email" style="font-size: smaller; font-weight: bolder;"/>
</f:facet>
<h:inputText value="#{custl.email}"></h:inputText>
</rich:column>
</rich:dataTable>
</rich:panel>
</a4j:outputPanel>
Following is the code of the AdminBean:
#ManagedBean
#ViewScoped
public class AdminBean {
private String currentType;
private String currentItem;
private List<Customer> customerList = new ArrayList<Customer>();
private List<Account> accountList;
private List optionList;
public List getOptionList() {
optionList = new ArrayList<String>();
if (currentType.equals("Add New User")) {
optionList.add("Participant");
optionList.add("Administrator");
} else if (currentType.equalsIgnoreCase("Manage Balance")) {
optionList.add("Withdrawl");
optionList.add("Deposit");
}
return optionList;
}
public void setOptionList(List optionList) {
this.optionList = optionList;
}
public List<Account> getAccountList() {
return accountList;
}
public void setAccountList(List<Account> accountList) {
this.accountList = accountList;
}
public List<Customer> getCustomerList() {
System.out.println("got list..................");
return customerList;
}
public void setCustomerList(List<Customer> customerList) {
this.customerList = customerList;
}
public String getCurrentItem() {
return currentItem;
}
public void setCurrentItem(String currentItem) {
this.currentItem = currentItem;
}
public String getCurrentType() {
return currentType;
}
public void setCurrentType(String currentType) {
this.currentType = currentType;
}
public void addCustAction(){
System.out.println("kshitij jain.......actionListener"+customerList.size());
Customer cust = new Customer();
customerList.add(cust);
}
}
You have some problems in your code:
Every UICommand should be wrapped inside a <h:form> in order to work. Please refer to commandButton/commandLink/ajax action/listener method not invoked or input value not updated, section 1.
You're not declaring the actionListener method in the right way, the method needs an ActionEvent event parameter. It looks like you wanted to use action instead. Refer to Differences between action and actionListener for more info.
In RichFaces 4, there's no need to use <h:commandButon> together with <a4j:ajax>, this is the purpose of <a4j:commandButton>. From the documentation:
The component is similar to the JavaServer Faces (JSF) component, but additionally includes Ajax support.
Tying all these advices together, your JSF code should be (I've omitted not necessary code to test the results like styles and rendered conditions)
<a4j:outputPanel id="rep" >
<rich:panel id="out">
<h:form id="frmCustomerData">
<h:panelGrid columns="2">
<a4j:commandButton value="Add New"
action="#{adminBean.addCustAction}"
render="setcust" />
<a4j:commandButton value="Delete" />
</h:panelGrid>
<rich:dataScroller for="setcust" style="margin-top: 17px"></rich:dataScroller>
<rich:dataTable id="setcust" value="adminBean.customerList" var="custl" rows="10" style="width: 900px;margin-top: 5px">
<!-- datatable content... -->
</rich:dataTable>
</h:form>
</rich:panel>
</a4j:outputPanel>
There's no need to make any change on the managed bean.
I'm using Mojarra, PF 3.5 SNAPSHOT, Tomcat 7.0.32 and trying to make a datatable update itself when changes have been done by other clients. I'm also using CDF beans along with MyCODI, #ViewAccessScoped.
When I was using 3.4, in-row editing (instead of in-cell editing) and standard #ConversationScoped it was working.
This is the 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:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:t="http://myfaces.apache.org/tomahawk">
<ui:composition template="commonLayout.xhtml">
<ui:define name="content">
<p:growl id="growlmessage" showDetail="false" autoUpdate="true"/>
<p:contextMenu for="staffTable">
<p:menuitem value="Open" update="staffTable" icon="ui-icon-close" actionListener="#{staffbean.onOpen}" />
<p:menuitem value="Delete" update="staffTable" icon="ui-icon-close" onclick="confirmation.show()" />
</p:contextMenu>
<p:confirmDialog id="confirmDialog" message="#{text['viewedit.delete.confirm']}"
header="#{text['viewedit.delete.header']}" severity="alert" widgetVar="confirmation" appendToBody="true" closable="false" visible="false" >
<p:commandButton action="#{staffbean.onDelete}" ajax="true" value="Yes" oncomplete="confirmation.hide()" icon="ui-icon-check" />
<p:commandButton value="No" onclick="confirmation.hide()" type="button" icon="ui-icon-closethick" />
</p:confirmDialog>
<p:dataTable id="staffTable" var="staff" widgetVar="staffList" value="#{staffbean.objectList}" paginator="true" rows="15" paginatorPosition="bottom" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" currentPageReportTemplate="#{text['table.staff.filter.count']}" rowsPerPageTemplate="15,25,50,100" emptyMessage="#{text['table.staff.filter.notfound']}" filteredValue="#{staffbean.filteredObject}" editable="true" editMode="cell" draggableColumns="true" rowKey="#{staff.id}" selection="#{staffbean.selectedObject}" selectionMode="single">
<f:facet name="header">
<p:columnGroup type="header">
<p:row>
<p:column colspan="4">
<h:outputText value="#{text['table.staff.header']}" />
</p:column>
</p:row>
<p:separator/>
<p:row>
<p:panelGrid columns="5" styleClass="headerGrid">
<p:column colspan="2">
<h:outputText value="#{text['table.filter.global']}" />
<p:inputText id="globalFilter" onkeyup="staffList.filter()" style="width:150px" />
</p:column>
<p:column colspan="2">
<p:selectOneMenu id="pageonly" value="#{staffbean.pageOnly}" >
<f:selectItem itemLabel="#{text['dataexporter.pageonly']}" itemValue="true" />
<f:selectItem itemLabel="#{text['dataexporter.entirepage']}" itemValue="false" />
<p:ajax event="change" listener="#{staffbean.exportXLS}" update="#form" immediate="true" />
</p:selectOneMenu>
<h:commandLink>
<p:graphicImage id="exportPage" value="/resources/img/excel.png" />
<p:dataExporter type="xls" target="staffTable" fileName="staff" pageOnly="#{staffbean.pageOnly}"/>
<p:tooltip for="exportPage" value="#{text['dataexporter.tooltip']}" showEffect="fade" hideEffect="fade" />
</h:commandLink>
</p:column>
</p:panelGrid>
</p:row>
</p:columnGroup>
</f:facet>
<p:column id="nameColumn" headerText="#{text['label.name']}" sortBy="#{staff.name}" filterBy="#{staff.name}" filterMatchMode="contains">
<p:cellEditor>
<f:facet id="nameoutput" name="output">
<h:outputText value="#{staff.name}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{staff.name}" style="width:100%" required="true" requiredMessage="#{text['validation.error.required.name']}"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column id="staffnoColumn" headerText="#{text['label.staffno']}" sortBy="#{staff.staffno}" filterBy="#{staff.staffno}" filterMatchMode="contains">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{staff.staffno}" />
</f:facet>
<f:facet id="staffliststaffno" name="input">
<p:inputText value="#{staff.staffno}" style="width:100%" required="true" requiredMessage="#{text['validation.error.required.staffno']}">
<pe:keyFilter regEx="/^\d+$/" preventPaste="false"/>
<f:validator validatorId="staffnoValidator" />
<f:validator validatorId="numericValidator" />
</p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<f:facet name="footer" id="footer">
There are #{fn:length(staffbean.objectList)} staff in total.
</f:facet>
<p:ajax event="cellEdit" listener="#{staffbean.onEdit}" update="#form" />
</p:dataTable>
</ui:define>
<ui:define name="socket">
<p:socket channel="/ba" >
<p:ajax event="message" update="ba_staffTable" />
</p:socket>
</ui:define>
</ui:composition>
Bean:
public void update(Object object) {
if (!getEm().getTransaction().isActive()) {
getEm().getTransaction().begin();
}
try {
get().merge(object);
get().getTransaction().commit();
} catch (PersistenceException e) {
if (ExceptionUtil.is(e, ConstraintViolationException.class) || ExceptionUtil.is(e, RollbackException.class)) {
e.printStackTrace();
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, ResourceLoader.MESSAGES.getProperty("staff.error.dbconstraint"), null));
if (getEm().getTransaction().isActive()) {
getEm().getTransaction().rollback();
}
}
}
PushContextFactory.getDefault().getPushContext().push("/ba", "");
}
Your table id is staffTable not ba_staffTable