I'm using JSF2.0 and trying to call a java function from javascript but couldn't achieve this.
I've a jsp with datatable, where 2 of my columns(Material and Desc) fetch data from the popup jsp.Now the user enters data in 2 other fields(Unit and Qty), taking these 4 as input parameters I have a java function which returns the rest of the values (NetPrice and NetTax in my example)
How can I call the java method here such that I can get the values to my jsp's(test.jsp) text fields.Here is the code snippet of my trail
test.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script LANGUAGE="JavaScript">
function testPrevSibling(buttonElement) {
try {
// alert(buttonElement);
var inputText = buttonElement.previousSibling;
while (inputText.nodeType!=1)
{
inputText =inputText.previousSibling;
}
// alert(inputText.id);
return inputText.id;
} catch(ex) {
alert("bad " + ex);
}
}
function testNextSibling(buttonElement) {
try {
// alert(buttonElement);
var inputText = buttonElement.nextSibling;
while (inputText.nodeType!=1)
{
inputText =inputText.nextSibling;
}
// alert("next sibling-->"+inputText.innerHTML);
return inputText;
} catch(ex) {
alert("bad " + ex);
}
}
// var inputId;
function popUp(URL,buttonRef) {
var inputId = testPrevSibling(buttonRef);
// alert(inputId);
day = new Date();
id = day.getTime();
URL = URL+"?inputId="+inputId;
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=1,statusbar=0,menubar=0,resizable=1,width=250,height=800 left = 630,top = 502');");
}
function getDetails(inputId,matVal,desc){
var inputRef = document.getElementById(inputId);
var tdRef = inputRef.parentNode;
var tdNextRef = testNextSibling(tdRef);
// alert("td Ref-->"+tdRef+"td next Ref-->"+tdNextRef);
var descRef = tdNextRef.firstChild;
// alert("Child ref-->"+descRef);
// alert("Current JSP-->"+matVal+"input Id-->"+inputId+"desc-->"+desc);
document.getElementById(inputId).value = matVal;
descRef.value = desc;
}
</script>
<title>JSP Page</title>
</head>
<body>
<f:view>
<h:form>
<br>
<h:panelGrid bgcolor="#9AC8E6" width="100%">
<h:dataTable id="d" value="#{SalesCreate.orderBean.itemList}" var="iBean" bgcolor="#9AC8E6" border="10" cellpadding="5" cellspacing="3" rows="10" width="100%" dir="LTR" frame="hsides" rules="all" >
<h:column>
<f:facet name="header">
<h:outputText style=""value="Material" />
</f:facet>
<h:inputText id="mat" value="#{iBean.material}" > </h:inputText>
<h:commandButton value="..." onclick="javascript:popUp('MaterialList.jsp',this)" > </h:commandButton>
<h:commandButton style="display:none" value="..." onclick="" > </h:commandButton>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText style=""value="Description" />
</f:facet>
<h:inputText id="desc" value="#{iBean.description}" > </h:inputText>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText style=""value="Unit" />
</f:facet>
<h:inputText value="#{iBean.unit}" > </h:inputText>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Quantity"/>
</f:facet>
<h:inputText value="#{iBean.quantity}"> </h:inputText>
<h:form>
<h:commandLink value="get Pricing" action="#{SalesCreate.pricingForQuotation}" >
<f:param name="mat" value="#{iBean.material}" />
<f:param name="unt" value="#{iBean.unit}" />
<f:param name="qty" value="#{iBean.quantity}" />
</h:commandLink> </h:form>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText style=""value="Unit Price" />
</f:facet>
<h:inputText value="#{iBean.netPrice}" > </h:inputText>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText style=""value="Total Price" />
</f:facet>
<h:inputText value="#{iBean.netTax}" > </h:inputText>
</h:column>
</h:dataTable>
</h:panelGrid>
</h:form>
</f:view>
</body>
popup.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script LANGUAGE="JavaScript">
function testNextSibling(buttonElement) {
try {
// alert(buttonElement);
var inputText = buttonElement.nextSibling;
while (inputText.nodeType!=1)
{
inputText =inputText.nextSibling;
}
alert("next sibling-->"+inputText.innerHTML);
return inputText.innerHTML;
} catch(ex) {
alert("bad " + ex);
}
}
function gup( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
function setMaterialValue(mat,matNum){
// alert("mat " + mat);
var desc = testNextSibling(mat);
// alert("Description-->"+desc);
var inputId = gup("inputId");
window.opener.getDetails(inputId,matNum,desc);
// window.opener.document.getElementById(mat).value;
window.close();
}
</script>
<title>JSP Page</title>
</head>
<f:view>
<body>
<h:dataTable id="datatbl" value="#{SalesCreate.inquiryMaterialList}" var="materialList" bgcolor="#9AC8E6" border="10" cellpadding="5" cellspacing="3" rows="3000" width="100%" dir="LTR" rules="all">
<h:column>
<f:facet name="header">
<h:outputText style=""value="Material" />
</f:facet>
<h:form>
<h:commandLink style="" id="materialId" value="#{materialList.material}" onclick="javascript:setMaterialValue(this,#{materialList.material})" ></h:commandLink>
<h:outputText style="display:none" value="#{materialList.description}"></h:outputText>
</h:form>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText style=""value="Description" />
</f:facet>
<h:form>
<h:commandLink style="" value="#{materialList.description}" onclick="javascript:setDescriptionValue(#{materialList.description})" ></h:commandLink></h:form>
</h:column>
</h:dataTable>
</body>
</f:view>
I've tried using a commandLink but I want it to be done when the textfield looses its focus or something similar
<h:inputText value="#{yourbackingBean.first}">
<f:ajax event="blur" render="cm" listener="#{yourbackingBean.caluculate}"/>
</h:inputText>
h:inputText value="#{yourbackingBean.second}" id="cm"/>
</h:form>
Here event can be your choice like
blur,change,keyup,keydown
etc.........
Listener is the method to be
called when particular event
triggered.
Here caluclate is the method
consist of logic to populate
remaining fields in your jsp.
your Backing Bean
private int first=1;
private int second=1;
//Getters and Setters
public void caluculate(AjaxBehaviorEvent evt)
{
second=first*1000;
}
You can't. The most you can do is to make an AJAX request. Similar question has been answered here, How to access a java object in javascript from JSP?
Related
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>
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 am trying to call a property in jsf which using primefaces. but i have error 500 which not found on type managedbean.PersonelBean.
i am using hibernate jsf and spring.
PersonelBean.java
#ManagedBean(name="personelMB")
#SessionScoped
public class PersonelBean implements Serializable{
private static final long serialVersionUID = 1L;
#ManagedProperty(value="#{PersonelService}")
IPersonelService personelservice;
List<Personel> personelList;
private int personel_id;
private String pname;
private String pfamily;
private String paddress;
private String pphone;
public IPersonelService getPersonelservice() {
return personelservice;
}
public void setPersonelservice(IPersonelService personelservice) {
this.personelservice = personelservice;
}
public List<Personel> getPersonelList() {
personelList=new ArrayList<Personel>();
personelList.addAll(getPersonelservice().getPersonels());
return personelList;
}
public void setPersonelList(List<Personel> personelList) {
this.personelList = personelList;
}
//getter and setter method
public void addPersonel(){
Personel personel=new Personel();
personel.setPaddress(getPaddress());
personel.setPersonel_id(getPersonel_id());
personel.setPfamily(getPfamily());
personel.setPname(getPname());
personel.setPphone(getPphone());
getPersonelservice().addPersonel(personel);
}
}
personel.xhtml
<?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 dir="rtl"
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:fn="http://java.sun.com/jsp/jstl/functions"
>
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>اطلاعات پرسنلی</title>
</h:head>
<h:body>
<h1>اضافه کردن پرسنل جدید</h1>
<h:form>
<h:panelGrid columns="4" >
شماره پرسنلی :
<h:inputText id="id" value="#{personelMB.personel_id}"
size="20" required="true"
label="id" >
</h:inputText>
<br></br>
نام :
<h:inputText id="name" value="#{personelMB.pname}"
size="20" required="true"
label="Name" >
</h:inputText>
نام خانوادگی:
<h:inputText id="family" value="#{personelMB.pfamily}"
size="20" required="true"
label="family" >
</h:inputText>
آدرس :
<h:inputTextarea id="address" value="#{personelMB.paddress}"
cols="30" rows="10" required="true"
label="Address" >
</h:inputTextarea>
تلفن:
<h:inputText id="tel" value="#{personelMB.pphone}"
size="20" required="true"
label="tel" >
</h:inputText>
</h:panelGrid>
<h:commandButton value="درج اطلاعات" action="#{personelMB.addPersonel()}" />
</h:form>
<h2>مشاهده اطلاعات پرسنل</h2>
<h:form prependId="false">
<p:dataTable id="dataTable" var="personel" value="#{personelMB.getPersonelList()}">
<f:facet name="header">
اطلاعات پرسنل
</f:facet>
<p:column>
<f:facet name="header">
شماره پرسنلی
</f:facet>
<h:outputText value="#{personel.personel_id}" />
<f:facet name="footer">
کدملی
</f:facet>
</p:column>
<p:column headerText="نام">
<h:outputText value="#{personel.pname}" />
</p:column>
<p:column headerText="نام خانوادگی">
<h:outputText value="#{personel.pfamily}" />
</p:column>
<p:column headerText="آدرس">
<h:outputText value="#{personel.paddress}" />
</p:column>
<p:column headerText="تلفن">
<h:outputText value="#{personel.pphone}" />
</p:column>
<f:facet name="footer">
In total there are #{fn:length(personelMB.getPersonelList())} personels.
</f:facet>
</p:dataTable>
</h:form>
</h:body>
</html>
but i have this error:
description The server encountered an internal error () that prevented it from fulfilling this request.
exception
javax.servlet.ServletException: /personel.xhtml #58,88 value="#{personelMB.getPersonelList()}": Property 'getPersonelList' not found on type managedbean.PersonelBean
javax.faces.webapp.FacesServlet.service(FacesServlet.java:321)
root cause
javax.el.PropertyNotFoundException: /personel.xhtml #58,88 value="#{personelMB.getPersonelList()}": Property 'getPersonelList' not found on type managedbean.PersonelBean
com.sun.faces.facelets.el.TagValueExpression.getType(TagValueExpression.java:97)
org.primefaces.component.api.UIData.isLazyLoading(UIData.java:170)
org.primefaces.component.datatable.DataTableRenderer.encodeMarkup(DataTableRenderer.java:187)
org.primefaces.component.datatable.DataTableRenderer.encodeEnd(DataTableRenderer.java:107)
javax.faces.component.UIComponentBase.encodeEnd(UIComponentBase.java:879)
javax.faces.component.UIComponent.encodeAll(UIComponent.java:1650)
javax.faces.render.Renderer.encodeChildren(Renderer.java:164)
javax.faces.component.UIComponentBase.encodeChildren(UIComponentBase.java:849)
javax.faces.component.UIComponent.encodeAll(UIComponent.java:1643)
javax.faces.component.UIComponent.encodeAll(UIComponent.java:1646)
javax.faces.component.UIComponent.encodeAll(UIComponent.java:1646)
com.sun.faces.application.view.FaceletViewHandlingStrategy.renderView(FaceletViewHandlingStrategy.java:389)
com.sun.faces.application.view.MultiViewHandler.renderView(MultiViewHandler.java:127)
com.sun.faces.lifecycle.RenderResponsePhase.execute(RenderResponsePhase.java:117)
com.sun.faces.lifecycle.Phase.doPhase(Phase.java:97)
com.sun.faces.lifecycle.LifecycleImpl.render(LifecycleImpl.java:135)
javax.faces.webapp.FacesServlet.service(FacesServlet.java:309)
i don't know what is wrong but my addPersonel() works well.
Property value expressions needs to be specified in the following syntax, without the get (or is) prefix and without the parentheses:
value="#{personelMB.personelList}"
Look at your other gettes and setters and look at explanation of exception.
/personel.xhtml #58,88 value="#{personelMB.getPersonelList()}": Property 'getPersonelList' not found on type managedbean.PersonelBean
You're using correct JSF EL (this things: #{...}) for other properties of the PersonelBean:
#{personelMB.pname} -> translates to personelMB.getPname()
`#{bean.property}' -> bean.getProperty()
but suddenly you're using:
personelMB.getPersonelList()
You should use
#{personelMB.personelList}
you can work on #{#{personelMB.getPersonelList()}, but you should need add two jar files el-ap-SNAPSHOT.jar and el-impl-SNAPSHOT.jar.
I have a very strange problem when I try to implement click on table row with AJAX. This is the JS code that I use for click on row:
//for tabs
$(document).ready(function () {
$("#tabs").tabs();
});
$(window).load(function() {
jsf.ajax.addOnEvent(function (data) {
if (data.status === "success") {
$("#tabs").tabs();
}
});
});
$("tr").not(':first').hover(
function () {
$(this).toggleClass('highlited');
// $(this).css("background","#707070");
},
function () {
$(this).toggleClass('highlited');
// $(this).css("background","");
}
);
function highlight(param) {
var row = jQuery(param).parent().parent().children();
row.toggleClass('highlited');
// row.css("background","#707070");
}
var inputs = document.getElementsByTagName("INPUT");
for (var i in inputs) {
if (inputs[i].checked) {
highlight(inputs[i]);
}
}
//for clicking on a row and opening new page
function addOnclickToDatatableRows() {
//gets all the generated rows in the html table
var trs = document.getElementById('form:dataTable').getElementsByTagName('tbody')[0]
.getElementsByTagName('tr');
//on every row, add onclick function (this is what you're looking for)
for (var i = 0; trs.length > i; i++) {
var cells = trs[i].cells;
for(var j=1; j < cells.length; j++){
cells[j].onclick = new Function("rowOnclick(this.parentElement)");
}
}
}
function rowOnclick(tr) {
var elements = tr.cells[0].childNodes;
for(var i = 0; elements.length > i; i++) {
if ((typeof elements[i].id != "undefined") && (elements[i].id.indexOf("lnkHidden") > -1)) {
//opne in a new window// window.open(elements[i].href);
location.href=elements[i].href
break;
}
}
return false;
}
This is the JSF page:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="resources/css/themes/nvidia.com/images/favicon.ico" />
<link href="resources/css/helper.css" media="screen" rel="stylesheet" type="text/css" />
<link href="resources/css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="resources/css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="resources/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="resources/js/jquery-ui-1.8.18.custom.min.js"></script>
<link href="resources/css/jquery-ui-1.8.18.custom.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="resources/js/tabs.js"></script>
</h:head>
<h:body onload="addOnclickToDatatableRows();">
<h1><img src="resources/css/images/icon.png" alt="DX-57" /> History Center</h1>
<!-- layer for black background of the buttons -->
<div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative; background-color:black">
<!-- Include page Navigation -->
<ui:insert name="Navigation">
<ui:include src="Navigation.xhtml"/>
</ui:insert>
</div>
<div id="logodiv" style="position:relative; top:35px; left:0px;">
<h:graphicImage alt="Dashboard" style="position:relative; top:-20px; left:9px;" value="resources/images/logo_sessions.png" />
</div>
<div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute; background-color:transparent; top:105px">
<div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute; background-color:transparent; top:80px">
<div id="settingsHashMap" style="width:750px; height:400px; position:absolute; background-color:r; top:20px; left:1px">
<h:form id="form">
<!-- The sortable data table -->
<h:dataTable id="dataTable" value="#{SessionsController.dataList}" binding="#{table}" var="item">
<!-- Check box -->
<h:column>
<f:facet name="header">
<h:outputText value="Select" />
</f:facet>
<h:selectBooleanCheckbox onclick="highlight(this)" value="#{SessionsController.selectedIds[item.aSessionID]}" />
<!-- Click on table code -->
<h:outputLink id="lnkHidden" value="HistoryLink.xhtml" style="display:none">
<f:param name="id" value="#{item.aSessionID}" />
</h:outputLink>
</h:column>
<!-- Row number -->
<h:column>
<f:facet name="header">
<h:commandLink value="№" actionListener="#{SessionsController.sort}">
<f:attribute name="№" value="№" />
</h:commandLink>
</f:facet>
<h:outputText value="#{table.rowIndex + SessionsController.firstRow + 1}" />
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="Account Session ID" actionListener="#{SessionsController.sort}">
<f:attribute name="sortField" value="Account Session ID" />
</h:commandLink>
</f:facet>
<h:outputText value="#{item.aSessionID}" />
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="User ID" actionListener="#{SessionsController.sort}">
<f:attribute name="sortField" value="User ID" />
</h:commandLink>
</f:facet>
<h:outputText value="#{item.userID}" />
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="Activity Start Time" actionListener="#{SessionsController.sort}">
<f:attribute name="sortField" value="Activity Start Time" />
</h:commandLink>
</f:facet>
<h:outputText value="#{item.activityStart}" />
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="Activity End Time" actionListener="#{SessionsController.sort}">
<f:attribute name="sortField" value="Activity End Time" />
</h:commandLink>
</f:facet>
<h:outputText value="#{item.activityEnd}" />
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="Activity" actionListener="#{SessionsController.sort}">
<f:attribute name="sortField" value="Activity" />
</h:commandLink>
</f:facet>
<h:outputText value="#{item.activity}" />
</h:column>
</h:dataTable>
<!-- The paging buttons -->
<h:commandButton value="first" action="#{SessionsController.pageFirst}"
disabled="#{SessionsController.firstRow == 0}" >
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
<h:commandButton value="prev" action="#{SessionsController.pagePrevious}"
disabled="#{SessionsController.firstRow == 0}" >
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
<h:commandButton value="next" action="#{SessionsController.pageNext}"
disabled="#{SessionsController.firstRow + SessionsController.rowsPerPage >= SessionsController.totalRows}" >
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
<h:commandButton value="last" action="#{SessionsController.pageLast}"
disabled="#{SessionsController.firstRow + SessionsController.rowsPerPage >= SessionsController.totalRows}" >
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
<h:outputText value="Page #{SessionsController.currentPage} / #{SessionsController.totalPages}" />
<br />
<!-- The paging links -->
<ui:repeat value="#{SessionsController.pages}" var="page">
<h:commandLink value="#{page}" actionListener="#{SessionsController.page}"
rendered="#{page != SessionsController.currentPage}" >
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandLink>
<h:outputText value="#{page}" escape="false"
rendered="#{page == SessionsController.currentPage}" />
</ui:repeat>
<br />
<!-- Set rows per page -->
<h:outputLabel for="rowsPerPage" value="Rows per page" />
<h:inputText id="rowsPerPage" value="#{SessionsController.rowsPerPage}" size="3" maxlength="3" />
<h:commandButton value="Set" action="#{SessionsController.pageFirst}" >
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
<h:message for="rowsPerPage" errorStyle="color: red;" />
<h:commandButton value="Delete" action="#{SessionsController.deleteSelectedIDs}" >
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
<!-- <span class="ui-icon ui-icon-newwin"></span>Open Dialog
-->
<script type="text/javascript" src="resources/js/tabs.js"></script>
</h:form>
</div>
<div id="settingsdivb" style="width:350px; height:400px; position:absolute; background-color:transparent; top:20px; left:800px">
</div>
</div>
</div>
</h:body>
</html>
When I remove the AJAX code I can successfully click on datatable row and open a new page. But when I add the AJAX code when I load the table on the first page it works, but when I switch on the second page the JS code is not working. What maybe the problem?
I also call the JS code twice - in the header and at the end of the form.
Use onmouseover.
<h:dataTable onmouseover="addOnclickToDatatableRows();">