Primefaces 3.5 SNAPSHOT datatable push (websocket) update - java

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

Related

Java autocomplete' s not working after create row on primefaces

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>

Java Primefaces how to work with elements placed in dataTable column header

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;
}

Autocomplete address with google map library in Primefaces

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

primefaces dataTable selection Object type

#ManagedBean(name = "menuCtrl")
#ApplicationScoped
public class MenuControleur extends AbstractControleur implements Serializable {
private static final Logger log = Logger.getLogger(ApplicationControleur.class);
private PanierBeans[] selectedRep;
public PanierBeans[] getSelectedRep() {
return selectedRep;
}
public void setSelectedRep(PanierBeans[] selectedRep) {
this.selectedRep = selectedRep;
}
// cache
private List<Spectacle> spectacles;
private List<Representation> representations;
private Spectacle specSelec = new Spectacle();
private List<Artiste> artistes;
private List<Representation> representationsFiltrees;
private List lignesSelec;
public List getLignesSelec() {
return lignesSelec;
}
public void setLignesSelec(List lignesSelec) {
this.lignesSelec = lignesSelec;
}
and in the facelet i have this table
<p:dataTable id="dataTable" var="rep" value="#{menuCtrl.specSelec.representations}" widgetVar="representationsTable"
emptyMessage="Pas de représentation trouvée avec les criteres précisés" filteredValue="#{menuCtrl.representationsFiltrees}" paginator="true" rows="10"
style="background: none" >
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search all fields:" />
<p:inputText id="globalFilter" onkeyup="representationsTable.filter()" style="width:150px" />
</p:outputPanel>
</f:facet>
<p:column id="photoArtiste" headerText="Artiste" >
<ui:param name="imgPath" value="images:#{menuCtrl.specSelec.artiste.lienPhoto}.png" />
<p:graphicImage value="#{resource[imgPath]}" />
</p:column>
<p:column id="nomArtiste" filterBy="#{rep}"
headerText="Artiste"
filterMatchMode="contains">
<h:outputText value="#{menuCtrl.specSelec.artiste.nom}" />
</p:column>
<p:column id="nomSpectacle" filterBy="#{rep}"
headerText="Spectacle"
filterMatchMode="contains">
<h:outputText value="#{menuCtrl.specSelec.nomSpectacle}" />
</p:column>
<p:column id="addColumn" filterBy="#{rep.adresse}"
headerText="Ville" footerText="contains"
filterMatchMode="contains">
<h:outputText value="#{rep.salle.adresseSalle}" />
</p:column>
<p:column id="dateDebutColumn" headerText="Date" footerText="startsWith">
<h:outputText value="#{rep.dateDebut}"
id="popupDate">
<f:convertDateTime pattern="d/M/yyyy" />
</h:outputText>
</p:column>
<p:column id="dispColumn"
headerText="Disponibilité">
<p:inputText id="champDisBillets" value="100" size="5" readonly="true" />
</p:column>
<p:column id="qteBillets"
headerText="Qte Billets">
<p:selectOneMenu value="#{buttonBean.number}">
<f:selectItem itemLabel="1" itemValue="1" />
<f:selectItem itemLabel="2" itemValue="2" />
<f:selectItem itemLabel="3" itemValue="3" />
<f:selectItem itemLabel="4" itemValue="4" />
<f:selectItem itemLabel="5" itemValue="5" />
<f:selectItem itemLabel="6" itemValue="6" />
</p:selectOneMenu>
</p:column>
<p:calendar value="#{calendarBean.date2}" id="popupCal" />
<p:column id="priceColumn" filterBy="#{rep}"
headerText="Prix" footerText="contains"
filterMatchMode="contains">
<p:inputText id="prixBillets" value="#{rep.prix}" readonly="true" size="5"/>
</p:column>
</p:dataTable>
nom i want to add checkboxes but in that case i would have to add a selection attributes that point to one of the managed bean attributes, thing is the rows are populated with differents inds of objects so what type o object should in selection ?

p:selectOneMenu value does not get set after ajax call

Im trying to have the option set to a specific value from the backend after an AJAX-call, however although all other field-types are successfully set the selectOneMenu is not. Im using Primefaces/JSF.
xhtml:
<p:inputText id="cpr" value="#{customerbean.customer.cpr}">
<p:ajax event="change" listener="#{customerbean.fetchCustomerDatafromCBS}" update="#form" immediate="true" >
<f:param name="cprNumber" value="#{customerbean.customer.cpr}"/>
</p:ajax>
<f:validator validatorId="cprValidator" />
</p:inputText>
<p:selectOneMenu id="gender" value="#{customerbean.customer.gender}" required="#{!customerbean.disabled}" requiredMessage="#{text['validation.error.required.gender']}" disabled="#{customerbean.disabled}">
<f:selectItem itemLabel="Select One" itemValue="" noSelectionOption="true" />
<f:selectItem itemLabel="Male" itemValue="Male" />
<f:selectItem itemLabel="Female" itemValue="Female" />
</p:selectOneMenu>
bean:
getCustomer().setGender(fetchedCustomer.getGender().trim());
NOTE
I just discovered that the value IS set (because the database row is inserted with the correct value) - but the selectOneMenu UI object on the browser does not reflect that.
ENTIRE VIEW:
<?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:f="http://java.sun.com/jsf/core"
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:panelGrid columns="2" styleClass="companyHeaderGrid" >
<f:facet name="header">
Create customer
</f:facet>
<h:outputLabel for="cpr" value="CPR" />
<h:outputLabel for="passportno" value="Passport No." />
<p:inputText id="cpr" value="#{customerbean.customer.cpr}">
<p:ajax event="change" listener="#{customerbean.fetchCustomerDatafromCBS}" update="#form" immediate="true" >
<f:param name="cprNumber" value="#{customerbean.customer.cpr}"/>
</p:ajax>
<f:validator validatorId="cprValidator" />
</p:inputText>
<p:inputText id="passportno" value="#{customerbean.customer.passportno}" readonly="#{customerbean.disabled}">
<f:validator validatorId="passportnoValidator" />
</p:inputText>
<h:outputLabel for="name" value="Name"/>
<h:outputLabel for="nationality" value="Nationality" />
<p:inputText id="name" value="#{customerbean.customer.name}" required="true" requiredMessage="#{text['validation.error.required.name']}" readonly="#{customerbean.disabled}"/>
<p:inputText id="nationality" value="#{customerbean.customer.nationality}" required="true" requiredMessage="#{text['validation.error.required.nationality']}" readonly="#{customerbean.disabled}" />
<h:outputLabel for="dob" value="Date of Birth" />
<h:outputLabel for="address" value="Address" />
<p:calendar id="dob" value="#{customerbean.customer.dob}" pattern="ddmmyyyy" readonly="#{customerbean.disabled}" />
<p:inputText id="address" value="#{customerbean.customer.address}" readonly="#{customerbean.disabled}" />
<h:outputLabel for="mailingaddress" value="Mailing Address" />
<h:outputLabel for="gender" value="Gender" />
<p:inputText id="mailingaddress" value="#{customerbean.customer.mailingAddress}" readonly="#{customerbean.disabled}" />
<p:selectOneMenu id="gender" value="#{customerbean.customer.gender}" required="#{!customerbean.disabled}" requiredMessage="#{text['validation.error.required.gender']}" disabled="#{customerbean.disabled}">
<f:selectItem itemLabel="Select One" itemValue="" noSelectionOption="true" />
<f:selectItem itemLabel="Male" itemValue="Male" />
<f:selectItem itemLabel="Female" itemValue="Female" />
</p:selectOneMenu>
<h:outputLabel for="mobileno" value="Mobile No." />
<h:outputLabel for="faxno" value="Fax No." />
<p:inputText id="mobileno" value="#{customerbean.customer.mobileno}" required="true" requiredMessage="#{text['validation.error.required.mobileno']}" validatorMessage="#{text['validation.error.mobileno']}" readonly="#{customerbean.disabled}" >
<f:validateLongRange minimum="0" maximum="99999999999999" />
</p:inputText>
<p:inputText id="faxno" value="#{customerbean.customer.faxno}" readonly="#{customerbean.disabled}" />
<h:outputLabel for="otherno" value="Other No." />
<h:outputLabel for="primaryemail" value="Primary email" />
<p:inputText id="otherno" value="#{customerbean.customer.otherno}" readonly="#{customerbean.disabled}" />
<p:inputText id="primaryemail" value="#{customerbean.customer.primaryemail}" required="false" validatorMessage="#{text['validation.error.required.email']}" readonly="#{customerbean.disabled}">
<f:validateRegex pattern="([\w\.-]*[a-zA-Z0-9_]#[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z])?" />
</p:inputText>
<h:outputLabel for="alternativeemail" value="Alternative email" />
<p:inputText id="alternativeemail" value="#{customerbean.customer.alternativeemail}" required="false" validatorMessage="#{text['validation.error.required.email']}" readonly="#{customerbean.disabled}">
<f:validateRegex pattern="([\w\.-]*[a-zA-Z0-9_]#[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z])?" />
</p:inputText>
<h:outputLabel for="maritalstatus" value="Marital status" />
<h:outputLabel for="nochildren" value="No. of Children" />
<p:selectOneMenu id="maritalstatus" value="#{customerbean.customer.maritalStatus}" disabled="#{customerbean.disabled}">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItem itemLabel="Single" itemValue="Single" />
<f:selectItem itemLabel="Married" itemValue="Married"/>
<f:selectItem itemLabel="Divorced" itemValue="Divorced"/>
<f:selectItem itemLabel="Widow" itemValue="Widow"/>
</p:selectOneMenu>
<p:inputText id="nochildren" value="#{customerbean.customer.nochildren}" readonly="#{customerbean.disabled}" />
<f:facet name="footer">
<center>
<p:commandButton action="#{customerbean.add(customerbean.customer)}" ajax="false" value="Save" icon="ui-icon-check" />
<p:commandButton value="Reset" update="cpr passportno name nationality dob address mailingaddress gender genderhidden mobileno faxno otherno primaryemail alternativeemail maritalstatus maritalstatushidden nochildren messages" process="#this"
icon="ui-icon-cancel">
<pe:resetInput for="cpr passportno name nationality dob address mailingaddress gender genderhidden mobileno faxno otherno primaryemail alternativeemail maritalstatus maritalstatushidden nochildren"/>
</p:commandButton>
</center>
</f:facet>
</p:panelGrid>
<p:inputText id="genderhidden" type="hidden" value="#{customerbean.customer.gender}" />
<p:inputText id="maritalstatushidden" type="hidden" value="#{customerbean.customer.maritalStatus}" />
</ui:define>
</ui:composition>
</html>

Set customerbean to #ViewScoped
eg:
#ManagedBean
#ViewScoped
public class customerbean implements Serializable {
}

Ok, I found the culprit: noSelectionOption="true" on the f:selectItem. Once I remove that, it works fine. The reason maritalStatus worked is because it doesnt have the noSelectionOption attribute.

Categories