I have 2 tab in accordionPanel (tab1 and tab2), tab2 is disabled by default, and tab activeIndex is -1 by default.
I want the tab2 be enable if i check on the checkbox in tab1.
I tried by update the whole accordionPanel(bbb), but the tab1 will collapse as default.
method1:
xhtml:
<h:form id="aaa">
<p:accordionPanel id="bbb" activeIndex="#{beanPage.testdd}" widgetVar="accordionPanelWidget">
<p:tab id="tab1">
<f:facet name="title">
<h:panelGroup columns="2">
<h:selectBooleanCheckbox id="chkBox1" value="#{beanPage.testbb}">
<p:ajax global="false" event="click" update=":aaa:bbb:chkBox1,:aaa:bbb" listener="#{beanPage.testcc}" />
</h:selectBooleanCheckbox>
<h:outputText value="tab1" />
</h:panelGroup>
</f:facet>
<h:outputText value="tab1" />
</p:tab>
<p:tab id="tab2" disabled="#{appealPage.testaa}">
<f:facet name="title">
<h:panelGroup columns="2">
<h:selectBooleanCheckbox id="chkBox2" value="#{appealPage.testee}">
<p:ajax global="false" event="click" update=":aaa:bbb:chkBox2" />
</h:selectBooleanCheckbox>
<h:outputText value="tab2" />
</h:panelGroup>
</f:facet>
<h:outputText value="tab2" />
</p:tab>
</p:accordionPanel>
</h:form>
beanPage:
public void init() {
setTestaa(true);
setTestbb(false);
setTestee(false);
setTestdd(-1);
}
public void testcc() {
boolean result = isTestbb();
if (result) {
setTestaa(false);
} else {
setTestaa(true);
}
}
Try this.
I removed the panelGroups.
This is what you need?
XHTML CODE
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
>
<h:head>
<style>
</style>
</h:head>
<h:body>
<h:form id="aaa">
<p:accordionPanel id="bbb" activeIndex="#{beanPage.testdd}" widgetVar="accordionPanelWidget">
<p:tab id="tab1" title="LA primera">
<f:facet name="title">
<h:selectBooleanCheckbox id="chkBox1" value="#{beanPage.testbb}">
<p:ajax global="false" event="click" update=":aaa:bbb:chkBox1,:aaa:bbb" listener="#{beanPage.testcc}" />
</h:selectBooleanCheckbox>
<h:outputText value="tab1" />
<h:outputText value="tab1" />
</f:facet>
</p:tab>
<p:tab id="tab2" disabled="#{beanPage.testaa}">
<f:facet name="title">
<h:selectBooleanCheckbox id="chkBox2" value="#{beanPage.testee}">
<p:ajax global="false" event="click" update=":aaa:bbb:chkBox2" />
</h:selectBooleanCheckbox>
<h:outputText value="tab2" />
<h:outputText value="tab2" />
</f:facet>
</p:tab>
</p:accordionPanel>
</h:form>
</h:body>
</html>
JAVA CODE
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
#ManagedBean(name="beanPage")
#ViewScoped
public class BeanPage {
public boolean testaa;
public boolean testbb;
public boolean testee;
public int testdd;
public BeanPage() {
System.out.println("1");
setTestaa(true);
setTestbb(false);
setTestee(false);
setTestdd(-1);
}
public void testcc() {
boolean result = isTestbb();
if (result) {
setTestaa(false);
} else {
setTestaa(true);
}
}
public boolean isTestaa() {
return testaa;
}
public void setTestaa(boolean testaa) {
this.testaa = testaa;
}
public boolean isTestbb() {
return testbb;
}
public void setTestbb(boolean testbb) {
this.testbb = testbb;
}
public boolean isTestee() {
return testee;
}
public void setTestee(boolean testee) {
this.testee = testee;
}
public int getTestdd() {
return testdd;
}
public void setTestdd(int testdd) {
this.testdd = testdd;
}
}
Related
I have primefaces command button multiple update problem. Command button is inside a form and datatable is not.
I have tried:
update=":datalist1,form1"
update=":datalist1 form1"
update="datalist1 form1"
update=":#{p:component('datalist1')},form1"
form1 updates every time but still dattable does not update
Version info:
primefaces: 5.3
jsf: org.glassfish 2.3.0-m04
spring: 4.2.3
and I use cdi for controller beans
Page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<body>
<h:form id="form1" >
<h:panelGrid columns="3">
<h:outputLabel value="Name: " for="name" />
<p:inputText id="name" value="#{personelController.personel.adi}" required="true" requiredMessage="Name can not be null" />
<p:message id="nameMsg" for="name" />
<h:outputLabel value="Surname: " for="surname" />
<p:inputText id="surname" value="#{personelController.personel.soyadi}" required="true" requiredMessage="Surname can not be null" />
<p:message id="surnameMsg" for="surname" />
<h:outputLabel value="Age: " for="age" />
<p:inputText id="age" value="#{personelController.personel.yasi}" required="true" requiredMessage="Age can not be null" />
<p:message id="ageMsg" for="age" />
<h:outputLabel value="Job: " for="job" />
<p:inputText id="job" value="#{personelController.personel.meslek}" required="true" requiredMessage="Job can not be null" />
<p:message id="jobMsg" for="job" />
<h:outputLabel value="City" for="city" />
<p:inputText id="city" value="#{personelController.personel.sehir}" required="true" requiredMessage="City can not be null" />
<p:message id="cityMsg" for="city" />
<p:commandButton id="add" value="Add" actionListener="#{personelController.createPersonel()}" update=":datalist1,form1" />
</h:panelGrid>
</h:form>
<p:dataTable id="datalist1" var="person" value="#{personelController.personels}" resizableColumns="true">
<f:facet name="header">List of Personel</f:facet>
<p:column headerText="ID">
<h:outputText value="#{person.id}" />
</p:column>
<p:column headerText="Name">
<h:outputText value="#{person.adi}" />
</p:column>
<p:column headerText="Surname">
<h:outputText value="#{person.soyadi}" />
</p:column>
<p:column headerText="Age">
<h:outputText value="#{person.yasi}" />
</p:column>
<p:column headerText="Job">
<h:outputText value="#{person.meslek}" />
</p:column>
<p:column headerText="City">
<h:outputText value="#{person.sehir}" />
</p:column>
</p:dataTable>
</body>
</html>
Class:
#Named
#SpringViewScoped
public class PersonelController implements Serializable{
private static final long serialVersionUID = 1L;
#Inject
private PersonelService personelService;
private List<Personel> personels;
private List<Personel> selectedPersonel;
private Personel personel;
#PostConstruct
public void init(){
personels=personelService.findAll();
personel=new Personel();
}
public PersonelService getPersonelService() {
return personelService;
}
public void setPersonelService(PersonelService personelService) {
this.personelService = personelService;
}
public List<Personel> getPersonels() {
return personels;
}
public void setPersonels(List<Personel> personels) {
this.personels = personels;
}
public List<Personel> getSelectedPersonel() {
return selectedPersonel;
}
public void setSelectedPersonel(List<Personel> selectedPersonel) {
this.selectedPersonel = selectedPersonel;
}
public Personel getPersonel() {
return personel;
}
public void setPersonel(Personel personel) {
this.personel = personel;
}
public void createPersonel(){
System.out.println("Personel adding..");
personelService.create(personel);
personel=new Personel();
System.out.println("Personel added");
}
}
I have researched about primefaces command button update but all advices did not worked for me. Thank you in advance
It seems to me that the newly created personel it never added to the list. So you must for example say
personels.add(personel);
or
personels=personelService.findAll();
in createPersonel(), or set personels to null and do a lazy load in getPersonels().
I am currently developing an application with JPA2, Spring 3, MyFaces 2.1 and Primefaces 4.0 RC1.
I developed a simple page with one datatable using pagination feature of primefaces, but when I click on page number (bottom or header), it simply doesn't work. No exception or javascript error is shown.
I've tested both in Chrome and Firefox. Same problem.
Here my code:
#ManagedBean
#ViewScoped
public class MeusCelularesTitularMB extends AbstractMB implements Serializable {
private static final long serialVersionUID = 5446365969371398743L;
private static final Logger logger = LogManager.getLogger(MeusCelularesTitularMB.class);
private CadastroGeral loggedUser;
private List<LinhaCelularTitular> listaCelularesTitular;
#PostConstruct
public void init() {
try {
this.loggedUser = getCadastroGeralService().loadUser(getAuthenticatedUser());
this.listarMeusCelularesTitular();
} catch (ServiceException e) {
logger.error("Erro ao consultar banco de dados", e);
throw new RuntimeException(e);
}
}
private void listarMeusCelularesTitular() {
try {
this.listaCelularesTitular = getLinhaCelularTitularSevice().getLinhasCelularesPorReponsavel(this.loggedUser.getMatricula());
} catch (ServiceException e) {
logger.error("Erro ao consultar banco de dados", e);
throw new RuntimeException(e);
}
}
private static CadastroGeralService getCadastroGeralService() {
return Faces.evaluateExpressionGet("#{cadastroGeralService}");
}
private static LinhaCelularTitularService getLinhaCelularTitularSevice() {
return Faces.evaluateExpressionGet("#{linhaCelularTitularService}");
}
public List<LinhaCelularTitular> getListaCelularesTitular() {
return listaCelularesTitular;
}
public void setListaCelularesTitular(List<LinhaCelularTitular> listaCelularesTitular) {
this.listaCelularesTitular = listaCelularesTitular;
}
}
And the 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 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">
<ui:composition template="../../templates/template.xhtml">
<ui:define name="content">
<h:outputStylesheet library="css" name="meusCelulares.css" />
<h:form id="meusCelularesTitulares">
<p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/>
<h2>Celulares - Titular</h2>
<p:dataTable id="tblLinhaCelularesTitulares"
var="celTitular"
widgetVar="wdgLinhaCelularesTitulares"
value="#{meusCelularesTitularMB.listaCelularesTitular}"
rowKey="#{celTitular.id}"
paginator="true"
rows="10"
rowsPerPageTemplate="5,10,15"
emptyMessage="Nenhum celular encontrado na Base de Dados">
<p:column>
<f:facet name="header">
<h:outputText value="Ações" />
</f:facet>
<h:outputText value="A B C" />
</p:column>
<p:column styleClass="colunaCentralizada">
<f:facet name="header">
<h:outputText value="Código DDD" />
</f:facet>
<h:outputText value="#{celTitular.codigoDDD}" />
</p:column>
<p:column styleClass="colunaCentralizada">
<f:facet name="header">
<h:outputText value="Número" />
</f:facet>
<h:outputText value="#{celTitular.numeroLinha}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Nome" />
</f:facet>
<h:outputText value="#{celTitular.responsavel.nome}" />
</p:column>
</p:dataTable>
</h:form>
</ui:define>
</ui:composition>
</html>
If you need some more information, please let me know.
Found the solution! Thanks to #XtremeBiker for the hints.
The <p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/> is referencing a dialog box that I forgot to add in the XHTML. So I added the code below and it worked.
<p:dialog modal="true"
widgetVar="statusDialog"
header="Aguarde..."
draggable="false"
closable="false"
resizable="false"
width="245"
height="25" >
<div align="center">
<p:graphicImage value="/resources/images/ajax-loader.gif" />
</div>
</p:dialog>
I use this code to block screen when a ajax request is processing.
Thanks again.
I have a datatable which has add edit delete and filter operations.
All the operations are working fine on the database but the datatable is not updating correctly after an add operation.
It is updated correctly after the 1st add operation.
when I add 2nd row the datatable is updated but the row which was added first is replaced with the row which was added 2nd but in the db they are updated correctly.
similarly when I add a 3rd row the 1st row is replaced with the 3rd row.
Software stack used in the CRUD dataTable application are :- PrimeFace 3.4.2,JSF 2.1,NetBeans 7.2.1,Java 1.6.0_37 GlassFish 3.1.x,MySql 5.x
This is my code.
**xhtml page**
<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:p="http://primefaces.org/ui">
<h:head>
<title>Prime Faces Data table</title>
</h:head>
<h:body>
<h:form id="form1">
<h:messages id="messages1"/>
<br/>
<p:commandButton id="Addbtn" value="Add" oncomplete="AddDialog.show()"
update=":addform"/>
<br/>
<p:dataTable id="dtusers" value="#{userdataController.retrieveData()}"
var="item"
rows="8" paginator="true" emptyMessage="No Records Found"
paginatorAlwaysVisible="false">
<p:column style="width:150px" filterMatchMode="contains"
filterBy ="#{item.id}">
<f:facet name="header"> Id </f:facet>
<h:outputText value="#{item.id}"/>
</p:column>
<p:column style="width:150px" filterMatchMode="contains"
filterBy="#{item.name}">
<f:facet name="header"> Name </f:facet>
<h:outputText value="#{item.name}"/>
</p:column>
<p:column style="width:150px">
<p:commandButton id="editButton" update=":editform"
oncomplete="EditDialog.show()" value="Edit">
<f:setPropertyActionListener value="#{item}"
target="#{userdataController.selectedUser}"/>
</p:commandButton>
</p:column>
<p:column style="width:150px">
<p:commandButton id="deleteButton" update=":deleteform"
oncomplete="UserDialog.show()" value="Delete">
<f:setPropertyActionListener value="#{item}"
target="#{userdataController.selectedUser}"/>
</p:commandButton>
</p:column>
</p:dataTable>
</h:form>
<p:dialog header="Add User Data" resizable="false" id="AddDialog"
widgetVar="AddDialog" modal="true" showEffect="fade" hideEffect="fade"
position="center" >
<h:form id="addform">
<p:outputPanel id="AddDisplay">
<p:panelGrid columns="2" >
<f:facet name="header">
Add Userdata
</f:facet>
<h:outputLabel for="Id" value="Enter Id:"/>
<p:inputText id="Id" value="#{userdataController.selected.id}" />
<h:outputLabel for="Name" value="Enter Name:"/>
<p:inputText id="Name"
value="#{userdataController.selected.name}"/>
<p:commandButton actionListener="#{userdataController.createdata}"
update=":form1:dtusers :form1:messages1" value="Save"
oncomplete="AddDialog.hide()" style="margin:0"/>
</p:panelGrid>
</p:outputPanel>
</h:form>
</p:dialog>
//similarly dialogs for delete and edit
</h:body>
</html>
**ManagedBean**
#ManagedBean(name = "userdataController")
#SessionScoped
public class UserdataController implements Serializable {
private Userdata current;
private DataModel items = null;
#EJB
private PrimeFacesDb.session.UserdataFacade ejbFacade;
private int id;
private String name;
private Userdata SelectedUser;
public UserdataController() {
}
//getters setters for id,name and SelectedUser
private UserdataFacade getFacade() {
return ejbFacade;
}
public List retrieveData() {
List result = getFacade().findAll();
return result;
}
public void create() {
try {
getFacade().create(current);
JsfUtil.addSuccessMessage("Userdata created successfully");
} catch (Exception e) {
JsfUtil.addErrorMessage(e, "Persistence Error occured");
}
}
}
the checkbox datatable of primefaces library doesn't work for me, I tried to make the same code as the showcase of primefaces but when I check some rows and I click on the view button the selectedCars[] contains 0 rows :
here is my xhtml page :
<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>TODO supply a title</title>
</h:head>
<h:body>
<h:form id="form">
<p:dataTable id="multiCars" var="car" value="#{fortest.mediumCarsModel}" paginator="true" rows="10"
selection="#{fortest.selectedCars}">
<f:facet name="header">
Checkbox Based Selection
</f:facet>
<p:column selectionMode="multiple" style="width:18px" />
<p:column headerText="id">
#{car.id}
</p:column>
<p:column headerText="date envoi">
#{car.dateEnvoi}
</p:column>
<p:column headerText="decision" >
#{car.decision}
</p:column>
<f:facet name="footer">
<p:commandButton id="multiViewButton" value="View" icon="ui-icon-search"
update=":form:displayMulti" oncomplete="multiCarDialog.show()"/>
</f:facet>
</p:dataTable>
<p:dialog id="multiDialog" header="Car Detail" widgetVar="multiCarDialog"
height="300" showEffect="fade" hideEffect="explode">
<p:dataList id="displayMulti"
value="#{fortest.selectedCars}" var="selectedCar">
id : #{selectedCar.id}, dateEnvoi #{selectedCar.dateEnvoi}
</p:dataList>
</p:dialog>
</h:form>
</h:body>
</html>
and here is my managed-Bean :
#ManagedBean
#SessionScoped
public class fortest implements Serializable {
private Commande[] selectedCars;
private dortestDataModel mediumCarsModel;
utilisateursHelper uh;
/**
* Creates a new instance of fortest
*/
public fortest() {
uh = new utilisateursHelper();
mediumCarsModel = new dortestDataModel(uh.getAllCommandes());
}
public void setSelectedCars(Commande[] selectedCars) {
System.out.println("alors je suis donc la size : "+selectedCars.length);
this.selectedCars = selectedCars;
}
public Commande[] getSelectedCars() {
return selectedCars;
}
public dortestDataModel getMediumCarsModel() {
return mediumCarsModel;
}
}
and here is my dataModel :
public class dortestDataModel extends ListDataModel<Commande> implements SelectableDataModel<Commande> {
utilisateursHelper uh;
public dortestDataModel() {
}
public dortestDataModel(List<Commande> data) {
super(data);
uh = new utilisateursHelper();
}
#Override
public Commande getRowData(String rowKey) {
//In a real app, a more efficient way like a query by rowKey should be implemented to deal with huge data
List<Commande> cars = (List<Commande>) uh.getAllCommandes();
for(Commande car : cars) {
if(car.getId().equals(rowKey))
return car;
}
return null;
}
#Override
public Object getRowKey(Commande car) {
return car.getId();
}
}
do you have any idea, thank you in advance
you forgot to attach rowCheckListener to your datatable like this
<p:ajax event="rowSelectCheckbox" listener="#{forTest.check}" />
below code is working for me. i am able to see the id and decision on the dialog.
XHTML:
i dint implement selectableDataModel, i just used rowKey attribute of datatable, you could use that as well
<h:form id="form">
<p:dataTable id="multiCars" var="car" value="#{forTest.carList}" paginator="true" rows="10"
rowKey ="#{car.id}" selection="#{forTest.selectedCars}" >
<p:ajax event="rowSelectCheckbox" listener="#{forTest.check}" />
<f:facet name="header">
Checkbox Based Selection
</f:facet>
<p:column selectionMode="multiple" style="width:18px" />
<p:column headerText="id">
#{car.id}
</p:column>
<p:column headerText="decision" >
#{car.decision}
</p:column>
<f:facet name="footer">
<p:commandButton id="multiViewButton" value="View" icon="ui-icon-search"
update=":form:displayMulti" oncomplete="multiCarDialog.show()"/>
</f:facet>
</p:dataTable>
<p:dialog id="multiDialog" header="Car Detail" widgetVar="multiCarDialog"
height="300" showEffect="fade" hideEffect="explode">
<p:dataList id="displayMulti"
value="#{forTest.selectedCars}" var="selectedCar">
id : #{selectedCar.id}, dateEnvoi #{selectedCar.decision}
</p:dataList>
</p:dialog>
</h:form>
ManagedBean:
package managedbeans;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.jws.Oneway;
import org.primefaces.event.SelectEvent;
import beans.Car;
#ManagedBean(name="forTest")
#SessionScoped
public class forTest implements Serializable {
private List<Car> carList = new ArrayList<Car>();
private Car selectedCars[];
public Car[] getSelectedCars() {
return selectedCars;
}
public void setSelectedCars(Car selectedCars[]) {
this.selectedCars = selectedCars;
}
public List<Car> getCarList() {
if(carList.size()==0) {
setCarList();
}
return carList;
}
public void setCarList() {
this.carList.add(new Car(1, "car1"));
this.carList.add(new Car(2, "car2"));
this.carList.add(new Car(3, "car3"));
}
public void check(SelectEvent event) {
System.out.println("in check");
}
}
Remove this:
<p:dialog id="multiDialog" header="Car Detail" widgetVar="multiCarDialog"
height="300" showEffect="fade" hideEffect="explode">
<p:dataList id="displayMulti"
value="#{forTest.selectedCars}" var="selectedCar">
id : #{selectedCar.id}, dateEnvoi #{selectedCar.decision}
</p:dataList>
</p:dialog>
Im using primefaces version 3.1.1, Mojarra 2.1.3, Netbeans 7.0.1, Glassfish Server 3.1.
My test application is using a facelet template with top, left, content, right and bottom layout with raw divs and css. After user logs in with container managed jdbcrealm, they will be presented with the main index.html which use the said template.
I put a navigation menu on the left panel which will subsequently update center panel content with ajax upon clicking menuitem. The center panel will be updated dynamically in <ui:include> by using sessionScoped NavigationBean.
In one of the page clientList.xhtml, I put a <p:dataTable> with a button to view the detail by popping up a <p:dialog>. Im using a viewCoped bean to hold the data list displayed on the dataTable.
The problem is, when I click on the button to select a row in the last colum of every row, the dialog does not appear at all, and my p:ajaxStatus gif image kept on rolling unendingly. When I debug the program with netbeans, I notice the constructor is called again and the previous instance is gone after clicking the button.
This is my index.xhtml using facelets template.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<ui:composition template="/BySalesAutomationTemplate.xhtml">
<ui:define name="title">
<h:outputText value="Facelet Index Page"></h:outputText>
</ui:define>
<ui:define name="top">
TOP
</ui:define>
<ui:define name="left">
<ui:include src="users/menu#{request.isUserInRole('ADMIN') ? 'Admin' : 'User'}.xhtml" />
</ui:define>
<ui:define name="right">
<h:outputText value="Cuba2 daan"></h:outputText>
</ui:define>
<ui:define name="maincontent">
<c:if test="#{navigationBean.page!=null}">
<ui:include src="#{navigationBean.page}.xhtml" />
</c:if>
</ui:define>
<ui:define name="bottom">
<center>2012</center>
</ui:define>
</ui:composition>
</html>
This is the clientList.xhtml page which is displayed in the center panel of my index.xhtml upon clicking a link on the menu in the left panel.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Client Listing</title>
</h:head>
<h:body>
<p>Client List</p>
<h:form>
<h:commandButton action="#{authBackingBean.logout}" value="Logout" />
</h:form>
<f:view>
<h:form id="formdetail" prependId="false">
<p:ajaxStatus>
<f:facet name="start">
<h:graphicImage value="images/loading.gif" />
</f:facet>
<f:facet name="complete">
<h:outputText value="" />
</f:facet>
</p:ajaxStatus>
<p:growl id="growl" showDetail="true"/>
<p:dataTable id="dtClientList" value="#{saClientController.lazyModel}" rowsPerPageTemplate="10,20,30,50"
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
paginatorAlwaysVisible="false" var="item" paginator="true" rows="10">
<f:facet name="header">
<h:outputText value="Client List"/>
</f:facet>
<p:column filterBy="#{item.idSaClient}">
<f:facet name="header">
<h:outputText value="IdSaClient"/>
</f:facet>
<p:commandLink action="#{saClientController.showDetails(item)}" value="#{item.idSaClient}" target=":maincontent"/>
</p:column>
<p:column filterBy="#{item.saClientName}">
<f:facet name="header">
<h:outputText value="saClientName"/>
</f:facet>
<h:outputText value="#{item.saClientName}"/>
</p:column>
<p:column filterBy="#{#item.saClientAddress}">
<f:facet name="header">
<h:outputText value="SaClientAddress"/>
</f:facet>
<h:outputText value="#{item.saClientAddress}"/>
</p:column>
<p:column style="width:40px">
<h:panelGrid columns="3" styleClass="actions" cellpadding="2">
<p:commandButton id="selectButton" update=":formdetail:display" oncomplete="clientDialog.show()" icon="ui-icon-search" title="View">
<f:setPropertyActionListener value="#{item}" target="#{saClientController.selectedSaClient}" />
</p:commandButton>
</h:panelGrid>
</p:column>
<f:facet name="footer">
<h:outputText value="Client List"/>
</f:facet>
</p:dataTable>
</h:form>
<p:dialog id="clientDialog" header="Client Detail" widgetVar="clientDialog" resizable="false" showEffect="explode" hideEffect="explode">
<h:panelGrid id="display" columns="2" cellpadding="4">
<f:facet name="header">
<h:outputText value="Selected Row" />
</f:facet>
<h:outputText value="ID" />
<h:outputText value="#{saClientcontroller.selectedSaClient.idSaClient}" />
<h:outputText value="NAME:" />
<h:outputText value="#{saClientcontroller.selectedSaClient.saClientName}" />
<h:outputText value="DESCRIPTION:" />
<h:outputText value="#{saClientcontroller.selectedSaClient.saClientAddress}" />
</h:panelGrid>
</p:dialog>
</f:view>
</h:body>
</html>
This is my Backing Bean.
public class SaClientController implements Serializable {
#EJB
private SaClientFacade saClientFacade;
private SaClient selectedSaClient;
private LazyDataModel<SaClient> lazyModel;
private List<SaClient> saclients;
/** Creates a new instance of SaClientController */
public SaClientController() {
}
#PostConstruct
public void Init() {
saclients = saClientFacade.Retrieve();
lazyModel = new LazyDataModelImp(saclients);
}
public LazyDataModel<SaClient> getLazyModel() {
return lazyModel;
}
public List<SaClient> getClients() {
return saClientFacade.Retrieve();
}
public SaClient getDetails() {
return selectedSaClient;
}
public String showDetails(SaClient selectedSaClient) {
this.selectedSaClient = selectedSaClient;
return "DETAILS";
}
public String update() {
System.out.println("###UPDATE###");
selectedSaClient = saClientFacade.Update(selectedSaClient);
return "SAVED";
}
public String list() {
System.out.println("###LIST###");
return "LIST";
}
public SaClient getSelectedSaClient() {
return selectedSaClient;
}
public void setSelectedSaClient(SaClient selectedSaClient) {
this.selectedSaClient = selectedSaClient;
}
public String dummyAction()
{
return null;
}
}
This is the LazyModelImp class
public class LazyDataModelImp extends LazyDataModel<SaClient> {
private List <SaClient> datasource;
public LazyDataModelImp(List<SaClient> datasource) {
this.datasource = datasource;
}
#Override
public SaClient getRowData(String rowKey) {
for (SaClient saclient : datasource) {
if (saclient.getIdSaClient().toString().equals(rowKey)) {
return saclient;
}
}
return null;
}
#Override
public Object getRowKey(SaClient saclient) {
return saclient.getIdSaClient().toString();
}
#Override
public List<SaClient> load(int first, int pageSize, String sortField, SortOrder sortOrder, Map<String, String> filters) {
List<SaClient> data = new ArrayList<SaClient>();
//filter
for (SaClient saclient : datasource) {
boolean match = true;
for (Iterator<String> it = filters.keySet().iterator(); it.hasNext();) {
try {
String filterProperty = it.next();
String filterValue = filters.get(filterProperty);
String fieldValue = String.valueOf(saclient.getFilterSortFieldValue(filterProperty));
if (filterValue == null || fieldValue.startsWith(filterValue.toUpperCase()) || fieldValue.startsWith(filterValue.toLowerCase())) {
match = true;
} else {
match = false;
break;
}
} catch (Exception e) {
match = false;
}
}
if (match) {
data.add(saclient);
}
}
//rowCount
int dataSize = data.size();
this.setRowCount(dataSize);
//paginate
if (dataSize > pageSize) {
try {
return data.subList(first, first + pageSize);
} catch (IndexOutOfBoundsException e) {
return data.subList(first, first + (dataSize % pageSize));
}
}
else {
return data;
}
//sort
//if (sortField != null) {
// Collections.sort(data, new LazySorter(sortField, sortOrder));
//}
//return data;
}
}
I've already disabled the partial state saving in web.xml.
<context-param>
<param-name>javax.faces.PARTIAL_STATE_SAVING</param-name>
<param-value>false</param-value>
</context-param>
The backingBean is reinitialized the first time I click on the view detail commandButton in the last column of the dataTable in clienList.xhtml. And the dialog does not display at all. But after pressing F5. The dialog can be displayed but without any content, the only thing displayed in the dialog is the label outputText but not the bean values, they are empty. Sorry for newbie question. I will be extremely glad if anyone could advise what im doing is wrong, and maybe a little advise on the navigation and whether my strategy of displaying everything in index.xhtml (so I only have 1 view id all the time which is index.xhtml, right?) is right.
This may be the issue with your PrimeFaces dialog that you have an h:form surrounding the p:dialog. I have noticed the PrimeFaces dialog does not work properly when a child of a form element.
Try placing this dialog form inside of the contents of the dialog.
<p:dialog id="clientDialog" header="Client Detail" widgetVar="clientDialog" resizable="false" showEffect="explode" hideEffect="explode">
<h:form id="formdialog" prependId="false">
<h:panelGrid id="display" columns="2" cellpadding="4">
...