How to display text in a dialog box? - jsf

The Data that I have entered in the input text field of the prime faces data table is not displayed in the dialog box JSF file and Data is not displayed in the dialog box
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Add/Remove Row</title>
</h:head>
<body>
<h:form id="form">
<p:dataTable id="buss" value="#{busBean.mediumBusModel}" var="bus"
selection="#{busBean.selectedBus}" selectionMode="single" >
<p:column headerText="Brand" style="width:5%">
<p:inputText value="#{bus.brand}" />
</p:column>
<p:column headerText="Model" style="width:5%">
<p:inputText value="#{bus.model}" />
</p:column>
<p:column headerText="Action" style="width:10%">
<p:commandButton actionListener="#{busBean.addBus()}" icon="ui-icon-plus" update=":form" ajax="false" title="add"/>
<p:commandButton actionListener="#{busBean.removeBus(bus)}" icon="ui-icon-minus" update=":form" ajax="false" title="remove"/>
</p:column>
<f:facet name="footer">
<p:commandButton id="viewButton" value="View" icon="ui-icon-search"
update=":form:displayBus" oncomplete="PF('singleBusDialog').show()"/>
</f:facet>
</p:dataTable>
<br/>
<p:dialog id="dialog" header="Bus Detail" widgetVar="singleBusDialog" resizable="false"
showEffect="fade" hideEffect="explode">
<h:panelGrid id="displayBus" columns="2" cellpadding="4">
<h:outputText value="Brand:" />
<h:outputText value="#{bus}" style="font-weight:bold"/>
<h:outputText value="Model:" />
<h:outputText value="#{bus}" style="font-weight:bold"/>
</h:panelGrid>
</p:dialog>
</h:form>
</body>
</html>
Below is the bean class that I have used
package com.bus.bean;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;
import org.primefaces.event.SelectEvent;
import org.primefaces.event.UnselectEvent;
import com.bus.bean.Bus;
#ManagedBean
#SessionScoped
public class BusBean implements Serializable {
private List<Bus> busList;
private Bus selectedBus;
private BusDataModel mediumBusModel;
public BusBean() {
busList=new ArrayList<Bus>();
busList.add(new Bus("a","b"));
mediumBusModel = new BusDataModel(busList);
//populateRandomCars(cars, 50);
}
public List<Bus> getBusList()
{
return busList;
}
public void setBusList(List<Bus> busList) {
this.busList = busList;
}
public void addBus()
{
Bus newBus=new Bus();
busList.add(newBus);
}
public Bus getSelectedBus() {
return selectedBus;
}
public void setSelectedBus(Bus selectedBus) {
this.selectedBus = selectedBus;
}
public void removeBus(Bus bus)
{
busList.remove(bus);
}
public BusDataModel getMediumBusModel() {
return mediumBusModel;
}
}
-------------------------------------------------------
package com.bus.bean;
import java.util.List;
import javax.faces.model.ListDataModel;
import com.bus.bean.Bus;
import org.primefaces.model.SelectableDataModel;
public class BusDataModel extends ListDataModel<Bus> implements SelectableDataModel<Bus> {
public BusDataModel() {
}
public BusDataModel(List<Bus> data) {
super(data);
}
#Override
public Bus 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<Bus> buss = (List<Bus>) getWrappedData();
for(Bus bus : buss) {
if(bus.getModel().equals(rowKey))
return bus;
}
return null;
}
#Override
public Object getRowKey(Bus bus) {
return bus.getBrand();
}
}
-----------------------------------------------------------------------------------------------/
package com.bus.bean;
import java.io.Serializable;
public class Bus implements Serializable
{
public String model;
public String brand;
public Bus()
{
}
public Bus(String Model,String Brand)
{
this.model = model;
this.brand = brand;
}
public String getModel() {
return model;
}
public void setModel(String model) {
this.model = model;
}
public String getBrand() {
System.out.println("in set:"+brand);
return brand;
}
public void setBrand(String brand) {
System.out.println("in set:"+brand);
this.brand = brand;
}
#Override
public boolean equals(Object obj) {
if(obj == null)
return false;
if(!(obj instanceof Bus))
return false;
Bus compare = (Bus) obj;
return compare.model.equals(this.model);
}
#Override
public int hashCode() {
int hash = 1;
return hash * 31 + model.hashCode();
}
#Override
public String toString() {
return "Bus{" + "model=" + model + ", brand=" + brand + '}';
}
enter code here
}
Please let me know how to get the data that I have entered in the text field of Primefaces data table to the dialog box

You should use the selected value from the datatable.
selection="#{busBean.selectedBus}"
So , in your dialog box
<h:outputText value="Brand:" />
<h:outputText value="#{busBean.selectedBus.brand}" />
Also,
<p:commandButton id="viewButton" value="View" icon="ui-icon-search"
update=":form:displayBus,:form:dialog" oncomplete="PF('singleBusDialog').show()"/>
Updating the dialog box with value of the selected row.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Add/Remove Row</title>
</h:head>
<body>
<h:form id="form">
<p:growl id="messages" showDetail="true"/>
<p:contextMenu for="buss">
<p:menuitem value="Edit Cell" icon="ui-icon-search" onclick="PF('busTable').showCellEditor();return false; "/>
</p:contextMenu>
<p:dataTable id="buss" var="bus" value="#{busBean.busModel}" editable="true" editMode="cell" widgetVar="busTable"
selection="#{busBean.selectedBus}">
<p:ajax event="cellEdit" listener="#{busBean.onCellEdit}" update=":form:messages" />
<p:column selectionMode="single" style="width:2%" />
<p:column headerText="Brand" style="width:25%">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{bus.brand}" /></f:facet>
<f:facet name="input"><p:inputText id="brandInput" value="#{bus.brand}" style="width:96%"/></f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Model" style="width:25%">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{bus.model}" /></f:facet>
<f:facet name="input"><p:inputText id="modelInput" value="#{bus.model}" style="width:96%"/></f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Action" style="width:10%">
<p:commandButton actionListener="#{busBean.addBus()}" icon="ui-icon-plus" update=":form" ajax="false" title="add"/>
<p:commandButton actionListener="#{busBean.removeBus(bus)}" icon="ui-icon-minus" update=":form" ajax="false" title="remove"/>
</p:column>
<f:facet name="footer">
<p:commandButton id="viewButton" value="View" icon="ui-icon-search"
update=":form:buss,:form:displayBus,:form:dialog" oncomplete="PF('singleBusDialog').show()"/>
</f:facet>
</p:dataTable>
<br/>
<p:dialog id="dialog" header="Bus Detail" widgetVar="singleBusDialog" resizable="false"
showEffect="fade" hideEffect="explode">
<h:panelGrid id="displayBus" columns="2" cellpadding="4">
<h:outputText value="Brand:" />
<h:outputText value="#{busBean.selectedBus.brand}" style="font-weight:bold"/>
<h:outputText value="Model:" />
<h:outputText value="#{busBean.selectedBus.model}"/>

Related

f:setPropertyActionListener only works in view not in backing bean

I try to get the information about the clicked button in a <p:datalist>, but it doesn't work.
My View:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui" template="/WEB-INF/template.xhtml">
<ui:define name="head">
<title>Hash Generator</title>
</ui:define>
<ui:define name="content">
<h:form id="hashForm">
<p:dataList id="hashList" value="#{hashGeneratorBean.hashList}" var="entry" rowIndexVar="idx" itemType="none">
<p:column>
<h:outputText value="#{idx + 1}" />
<h:inputText value="#{entry.clearText}" />
<h:inputText value="#{entry.hashedText}" readonly="true" disabled="true" size="#{entry.hashedText.length() + 15}"/>
<p:commandButton id="addRow" actionListener="#{hashGeneratorBean.addRow}" icon="ui-icon-plus" title="Icon Only" update="hashList">
<f:setPropertyActionListener value="#{entry}" target="#{hashGeneratorBean.selectedRow}" />
</p:commandButton>
<p:commandButton id="debugBtn" icon="ui-icon-disc" title="Icon Only" update=":hashForm:display" oncomplete="PF('dlg').show()">
<f:setPropertyActionListener value="#{entry}" target="#{hashGeneratorBean.selectedRow}" />
</p:commandButton>
</p:column>
</p:dataList>
<p:commandButton actionListener="#{hashGeneratorBean.hash}" value="Generate Hashes" update="hashList" />
<p:dialog modal="true" widgetVar="dlg">
<h:panelGrid id="display" columns="2">
<f:facet name="header">
<h:outputText value="#{hashGeneratorBean.selectedRow.clearText}" />
</f:facet>
<h:outputText value="#{hashGeneratorBean.selectedRow.hashedText}" />
</h:panelGrid>
</p:dialog>
</h:form>
</ui:define>
</ui:composition>
My Controller:
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.event.ActionEvent;
import com.google.common.base.Charsets;
import com.google.common.hash.Hashing;
#ManagedBean
#ViewScoped
public class HashGeneratorBean {
private List<HashDTO> hashList = new ArrayList<HashDTO>();
private HashDTO selectedRow = new HashDTO();
#PostConstruct
public void init() {
hashList.add(new HashDTO());
}
public void addRow(ActionEvent ae){
hashList.add(new HashDTO());
}
public void hash(ActionEvent ae){
for (HashDTO entry : hashList){
entry.setHashedText(generateHash(entry.getClearText()));
}
}
/**
* Hashes the given password with SHA-256
* #param password
* #return passwordHash
*/
public static String generateHash(String password) {
return Hashing.sha256().hashString(password, Charsets.UTF_8).toString();
}
public List<HashDTO> getHashList() {
return hashList;
}
public void setHashList(List<HashDTO> hashList) {
this.hashList = hashList;
}"
public HashDTO getSelectedRow() {
return selectedRow;
}
public void setSelectedRow(HashDTO selectedRow) {
this.selectedRow = selectedRow;
}
}
If I click the "debugBtn"-button the dialog popups up and shows the correct information about the row. But If I click the "addRow"-button the data in the managed-bean isn't filled correct. The selectedRow-property allways stores the last added row from the hashList-property.
I found the solution.
The PropertyActionListener is called after the ActionListener.
the Solution is to use "Action" or register the the ActionListener with and a Extended Action Listener

update primefaces dataTable with new rows adding dynamically

When I click on the button New <p:commandButton actionListener="#{ecritureCtrl.newLine}" value="New" update="dataTableSaisiePiece" oncomplete="addRowOnComplete()" ajax="true"/>, a new row is added to my dataTable on only the first click and the page is refreshed. Several cliques except the first were not refreshes the dataTable. So to see my newly added rows, I use the F5 key to refresh my page. Certainly my update="dataTableSaisiePiece" not work or only works rather the first click.
Here is my page home.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: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">
<script type="text/javascript">
function addRowOnComplete() {
jQuery('#supercoolnewrow').trigger('click');
}
</script>
<ui:composition template="/resources/template/all.xhtml">
<ui:define name="titre">Saisie</ui:define>
<ui:define name="content">
<p:tabView id="ViewPlan">
<p:tab id="tab2" title="Saisie 1">
<h:outputScript library="js" name="frenchLocale.js" />
<h:form id="formPiece">
<p:panel id="panelSaisie" header="Saisir" style="color: brown;font-size: 15px">
<h:panelGrid columns="3" >
<p:outputLabel for="description" value="Description:" ></p:outputLabel>
<p:inputText id="description" value="#{ecritureCtrl.description}" required="true" label="Description" maxlength="100" size="75">
<f:validateLength maximum="100" />
</p:inputText>
<p:message for="description" />
<p:outputLabel for="date" value="Date:" ></p:outputLabel>
<p:calendar locale="fr" id="date" required="true" label="Date" value="#{ecritureCtrl.date}" />
<p:message for="date" />
<p:outputLabel for="code" value="Code Avant" ></p:outputLabel>
<p:inputText id="code" value="#{ecritureCtrl.code}" required="true" >
</p:inputText>
<p:message for="code" />
</h:panelGrid>
<br/>
<p:dataTable var="line" value="#{ecritureCtrl.lignes}" id="dataTableSaisiePiece" >
<p:column headerText="First Name" style="width:150px">
<p:inputText value="#{line.intituleCompte}" style="width:100%"/>
</p:column>
<p:column headerText="Last Name" style="width:150px">
<p:inputText value="#{line.code}" style="width:100%"/>
</p:column>
</p:dataTable>
</p:panel>
<p:commandButton actionListener="#{ecritureCtrl.newLine}" value="New" update="dataTableSaisiePiece" oncomplete="addRowOnComplete()" ajax="true"/>
</h:form>
</p:tab>
<p:tab id="tab3" title="Saisie 2">
</p:tab>
</p:tabView>
</ui:define>
</ui:composition>
</html>
My ManagedBean:
#ManagedBean (name = "ecritureCtrl")
#SessionScoped
public class EcritureCtrl {
private List<Avant> lignes = new ArrayList<Avant>();
Avant unUser;
private String description;
private Date date;
private String code;
public EcritureCtrl() {
lignes.add(new Avant());
}
public void newLine(ActionEvent actionEvent){
lignes.add(new Avant());
}
}
Could you please help me ?
Thanks in advance.
this seems to work for me
import java.io.Serializable;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.ActionEvent;
#ManagedBean
#SessionScoped
public class EcritureCtrl implements Serializable {
private static final long serialVersionUID = 1L;
private String code;
private Date date;
private String description;
private List<Avant> lignes = new ArrayList<Avant>();
private Avant unUser;
public String getCode() {
return this.code;
}
public Date getDate() {
return this.date;
}
public String getDescription() {
return this.description;
}
public List<Avant> getLignes() {
return this.lignes;
}
public Avant getUnUser() {
return this.unUser;
}
#PostConstruct
private void init(){
this.lignes.add(new Avant());
}
public void newLine(ActionEvent actionEvent) {
this.lignes.add(new Avant());
}
public void setCode(String code) {
this.code = code;
}
public void setDate(Date date) {
this.date = date;
}
public void setDescription(String description) {
this.description = description;
}
public void setLignes(List<Avant> lignes) {
this.lignes = lignes;
}
public void setUnUser(Avant unUser) {
this.unUser = unUser;
}
}
and
<!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">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sorry</title>
</h:head>
<h:body>
<script type="text/javascript">
function addRowOnComplete() {
alert();
}
</script>
<h:form id="formPiece">
<p:messages id="messages" showDetail="true" autoUpdate="true"
closable="true" />
<p:tabView id="ViewPlan">
<p:tab id="tab2" title="Saisie 1">
<p:panel id="panelSaisie" header="Saisir"
style="color: brown;font-size: 15px">
<h:panelGrid columns="3">
<p:outputLabel for="description" value="Description:"></p:outputLabel>
<p:inputText id="description" value="#{ecritureCtrl.description}"
required="true" label="Description" maxlength="100" size="75">
<f:validateLength maximum="100" />
</p:inputText>
<p:message for="description" />
<p:outputLabel for="date" value="Date:"></p:outputLabel>
<p:calendar locale="fr" id="date" required="true" label="Date"
value="#{ecritureCtrl.date}" />
<p:message for="date" />
<p:outputLabel for="code" value="Code Avant"></p:outputLabel>
<p:inputText id="code" value="#{ecritureCtrl.code}"
required="true">
</p:inputText>
<p:message for="code" />
</h:panelGrid>
<br />
<p:dataTable var="line" value="#{ecritureCtrl.lignes}"
id="dataTableSaisiePiece">
<p:column headerText="First Name" style="width:150px">
<p:inputText value="#{line.intituleCompte}" style="width:100%" />
</p:column>
<p:column headerText="Last Name" style="width:150px">
<p:inputText value="#{line.code}" style="width:100%" />
</p:column>
</p:dataTable>
</p:panel>
<p:commandButton actionListener="#{ecritureCtrl.newLine}"
value="New" update="dataTableSaisiePiece" oncomplete="addRowOnComplete()"
ajax="true" />
</p:tab>
<p:tab id="tab3" title="Saisie 2">
</p:tab>
</p:tabView>
</h:form>
</h:body>
</html>

<p:dialog> Primefaces Probleme?

I have created a complexe dataTable for my DiplomeBean and it shows Correctly
The deal is whene i select a row from the list ,nothing happend
I want whene i select a row it shows me the elements of the diplome.
My Bean
package com.beans;
import java.util.ArrayList;
import java.util.HashSet;
import java.util.List;
import java.util.Set;
import com.bo.DiplomeBo;
import com.converter.DiplomeDataModel;
import com.model.Collaborateur;
import com.model.Diplome;
public class DiplomeBean {
public Integer idDiplome;
public String ecole;
public String typeEcole;
public String typeDiplome;
public Integer promotion;
private Set<Collaborateur> collaborateurs = new HashSet<Collaborateur>(0);
public Diplome selectedDiplome;
public Diplome getSelectedDiplome() {
return selectedDiplome;
}
public void setSelectedDiplome(Diplome selectedDiplome) {
this.selectedDiplome = selectedDiplome;
}
public Integer getIdDiplome() {
return idDiplome;
}
public void setIdDiplome(Integer idDiplome) {
this.idDiplome = idDiplome;
}
private DiplomeBo diplomeBo;
public String getEcole() {
return ecole;
}
public void setEcole(String ecole) {
this.ecole = ecole;
}
public String getTypeEcole() {
return typeEcole;
}
public void setTypeEcole(String typeEcole) {
this.typeEcole = typeEcole;
}
public Integer getPromotion() {
return promotion;
}
public void setPromotion(Integer promotion) {
this.promotion = promotion;
}
public Set<Collaborateur> getCollaborateurs() {
return collaborateurs;
}
public void setCollaborateurs(Set<Collaborateur> collaborateurs) {
this.collaborateurs = collaborateurs;
}
public void setDiplomeBo(DiplomeBo diplomeBo) {
this.diplomeBo = diplomeBo;
}
public String getTypeDiplome() {
return typeDiplome;
}
public void setTypeDiplome(String typeDiplome) {
this.typeDiplome = typeDiplome;
}
public String AddDiplome(){
Diplome diplome =new Diplome();
diplome.setEcole(getEcole());
diplome.setPromotion(getPromotion());
diplome.setTypeDiplome(getTypeDiplome());
diplome.setTypeEcole(getTypeEcole());
diplomeBo.addDiplome(diplome);
clearForm();
return "Ajout Bien Fait !!";
}
public List<Diplome> getAllDiplome(){
return diplomeBo.findAllDiplome();
}
private void clearForm(){
this.setEcole("");
this.setPromotion(0);
this.setTypeEcole("Choisir type..");
this.setTypeEcole("Choisir type..");
}
}
My 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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<body>
<f:view>
<h:outputLink value="Admin/default.xhtml">Go to your app</h:outputLink>
<h:form>
<p:dataTable value="#{diplome.getAllDiplome()}" var="d" paginator="true" rows="10" rowKey="diplome.idDiplome"
selection="#{diplome.selectedDiplome}" selectionMode="single"
onRowSelectUpdate="display" onRowSelectComplete="diplomeDialog.show()">
<f:facet name="header">
Diplome Liste
</f:facet>
<p:column sortBy="#{d.idDiplome}" filterBy="#{d.idDiplome}">
<f:facet name="header">
<h:outputText value="Model" />
</f:facet>
<h:outputText value="#{d.idDiplome}" />
</p:column>
<p:column sortBy="#{d.ecole}" filterBy="#{d.ecole}">
<f:facet name="header">
<h:outputText value="Ecole" />
</f:facet>
<h:outputText value="#{d.ecole}" />
</p:column>
</p:dataTable>
<p:dialog header="Diplome Detail" widgetVar="diplomeDialog" resizable="false"
width="200" showEffect="explode" hideEffect="explode">
<h:outputText value="id:" />
<h:outputText value="#{diplome.selectedDiplome.idDiplome}" />
<h:outputText value="Ecole:" />
<h:outputText value="#{diplome.selectedDiplome.ecole}" />
</p:dialog>
</h:form>
</f:view>
</body>
</html>
Thank's :)
Perhaps try modifying it slightly to be more like the Primefaces showcase example. For example, try something like this:
...
<h:form id="form">
...
<p:dataTable value="#{diplome.getAllDiplome()}" var="d" paginator="true" rows="10"
rowKey="diplome.idDiplome" selection="#{diplome.selectedDiplome}" selectionMode="single">
<p:ajax event="rowSelect" update=":form:display" oncomplete="PF('diplomeDialog').show()" />
...
</p:dataTable>
...
<p:dialog header="Diplome Detail" widgetVar="diplomeDialog" resizable="false"
width="200" showEffect="explode" hideEffect="explode">
<h:panelGrid id="display">
...
</h:panelGrid>
</p:dialog>
</h:form>
...
I can't test this right now, but it seems like it should work since it is essentially the same as the showcase's example.

Dependent columns in Primefaces datatable

I'm using an editable Primefaces p:datatable to show the data to the user. In this datatable, I have a p:column with a h:selectOneMenu, and another one with a p:selectBooleanCheckbox.
I want to check or uncheck and disable or enable the checkbox depending on the value selected in the h:selectOneMenu.
If I only had one h:selectOneMenu and one p:selectBooleanCheckbox, I'd use a p:ajax to attach a listener to the change event, and I'd manipulate the p:selectBooleanCheckbox in this method. But I have a pair of h:selectOneMenu and p:selectBooleanCheckbox per row and I don't know how to do this.
This is what I tried:
<h:form>
<p:dataTable var="appointment" value="#{prescController.appointmentsToday}" editable="true" id="tblAppointments">
<p:ajax event="rowEdit"
listener="#{prescController.onEdit}" update=":messages" />
<p:column sortBy="presc.drug" headerText="Drug">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{appointment.presc.drug.name}" />
</f:facet>
<f:facet name="input">
<h:selectOneMenu value="#{appointment.presc.drug}"
converter="#{drugConverter}" required="true">
<f:selectItem itemLabel="" noSelectionOption="true" />
<f:selectItems value="#{prescController.drugs}"
var="drug" itemLabel="#{drug.name}" />
<p:ajax update="autoAmount" />
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
<p:column sortBy="presc.autoAmount" headerText="Auto amount">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="Y"
rendered="#{not empty appointment.presc.drug.rules and appointment.presc.autoAmount}" />
<h:outputText value="N"
rendered="#{empty appointment.presc.drug.rules or not appointment.presc.autoAmount}" />
</f:facet>
<f:facet name="input">
<p:selectBooleanCheckbox id="autoAmount"
value="#{not empty appointment.presc.drug.rules and appointment.presc.autoAmount}"
disabled="#{appointment.presc.drug.name eq 'somethingsomething'}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<p:rowEditor />
</p:column>
</p:dataTable>
</h:form>
The post Retrieving other component's client ID in JSF 2.0 describes how to retrieve ids of other components in a page. In my opinion, the #{p:component('sampleButton')} should find the next component having this ID in the component tree - this should be the same row.
Alternatively, you should be able to rerender the whole row via JSF 2 #{component.parent.clientId} functionality (measure out, how many "parent" steps you need, e.g. #{component.parent.parent.clientId}).
Hope it helps, else just add comments... :-)
I can't imagine why you are unsatisfied with simple update="checkboxId"but what you can try is updating component through widgetVar which you can generate during page render.
Tiny example:
<?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://xmlns.jcp.org/jsf/html" xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Table Example</title>
</h:head>
<h:body>
<h:form prependId="false">
<p:dataTable var="data" value="#{tableBean.data}">
<p:column headerText="Command">
<p:commandButton value="Toggle" actionListener="#{tableBean.toggleSelection(data.id)}"
update="#widgetVar(tableCheckboxComponent_#{data.id})" />
</p:column>
<p:column headerText="Value">
<h:outputText value="#{data.value}" />
</p:column>
<p:column headerText="Selected">
<p:selectBooleanCheckbox widgetVar="tableCheckboxComponent_#{data.id}" value="#{data.selected}" />
</p:column>
</p:dataTable>
</h:form>
</h:body>
</html>
Backing bean:
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
#ManagedBean
#ViewScoped
public class TableBean {
private Map<String, MyData> data;
public List<MyData> getData(){
return new ArrayList<MyData>(data.values());
}
public TableBean() {
data = new HashMap<String, MyData>();
for (int i = 0; i<22; i++) {
String id = "id" + Integer.toString(i);
data.put(id, new MyData( id , i));
}
}
public void toggleSelection(String id) {
MyData myData = data.get(id);
myData.setSelected(!myData.isSelected());
}
}
And Data object:
public class MyData {
private String id;
private boolean selected;
private int value;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public int getValue() {
return value;
}
public void setValue(int value) {
this.value = value;
}
public boolean isSelected() {
return selected;
}
public void setSelected(boolean selected) {
this.selected = selected;
}
public MyData(String id, int value) {
this.id = id;
this.value = value;
this.selected = false;
}
}
I still don't know why my approach didn't work.
In the end, I added a listener to the p:ajax component to manipulate the SelectBooleanCheckbox in the managed bean
<p:ajax listener="#{prescBean.onDrugSelected}" update="autoAmount" />
public void onDrugSelected(AjaxBehaviorEvent event) {
Drug drug = (Drug) ((UIOutput) event
.getSource()).getValue();
boolean hasRules = drug.getRules().size() > 0;
SelectBooleanCheckbox cbAutoAmount = (SelectBooleanCheckbox) ComponentUtils
.findComponent(FacesContext.getCurrentInstance().getViewRoot(),
"autoAmount");
cbAutoAmount.setDisabled(!hasRules);
cbAutoAmount.setValue(hasRules);
}

p:commandButton doesn't call bean's method in an <ui:include> page

I'm having a problem when I include dynamically a page with <ui:include>, the action and actionlistener associated with the <p:commandButton> component is not being invoked.
I've tried to remove the tag <h:form> from the included page but the problem persists.What can I do to solve this problem?
The source code:
hello.xhtm (Main 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: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">
<f:view>
<h:head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<f:view contentType="text/html" />
</h:head>
<h:body>
<h:form id="helloForm">
<p:growl id="messages" />
<p:panelGrid id="panelGridPrincipal" styleClass="panelGridPrincipal">
<p:row>
<p:column colspan="2">
<div style="width: 100%; height: 25px; padding-left: 230px;">
<p:commandButton id="botao1" value="Bookmark" styleClass="button"/>
<p:commandButton id="botao2" value="Bookmark2" styleClass="button"
actionListener="#{mainBean.renderMenuVendas}" update="panel" >
<f:setPropertyActionListener value="2" target="#{mainBean.menuType}" />
</p:commandButton>
</div>
</p:column>
</p:row>
<p:row>
<p:column id="column2" style="width:200px;background-color: #5A5858;">
<h:panelGrid id="panel" styleClass="panelGridMenu" columns="1">
<p:menu id="dynamicMenu" model="#{mainBean.sideMenu}" rendered="#{mainBean.showMenuVendas}" style="width:189px;margin-right:100%;"/>
<p:spacer width="50px" height="700px" />
</h:panelGrid>
</p:column>
<p:column style="background-color: white">
<p:panelGrid style="border:1px;">
<p:row>
<p:column>
<p:outputPanel id="outputPanelConteudo">
<ui:include src="#{mainBean.paginaAtual}" />
</p:outputPanel>
</p:column>
</p:row>
<p:row/>
</p:panelGrid>
</p:column>
</p:row>
</p:panelGrid>
</h:form>
</h:body>
</f:view>
</html>
pagina1.xhtml (Included Page)
<?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">
<ui:composition 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">
<p:dataTable id="avioes" var="aviao" value="#{listaAvioesBean.aviao}"
rowKey="#{aviao.numeroSerie}"
selection="#{listaAvioesBean.selectedAviao}" selectionMode="single"
style="width:500px">
<p:column style="width:75px">
<f:facet name="header">
<h:outputText value="Numero de Serie" />
</f:facet>
<h:outputText value="#{aviao.numeroSerie}" />
</p:column>
<p:column style="width:100px">
<f:facet name="header">
<h:outputText value="Marca" />
</f:facet>
<h:outputText value="#{aviao.marca}" />
</p:column>
<p:column style="width:75px">
<f:facet name="header">
<h:outputText value="Modelo" />
</f:facet>
<h:outputText value="#{aviao.modelo}" />
</p:column>
<p:column style="width:75px">
<p:commandButton id="insertAviao" value="Inserir" title="Visualizar">
<f:setPropertyActionListener value="#{aviao}"
target="#{listaAvioesBean.selectedAviao}" />
</p:commandButton>
<!--THESE ACTION DOESN'T CALL THE BEAN METHOD!!! -->
<p:commandButton id="removerAviao" style="width:50px" value="P"
title="Deletar" action="#{listaAvioesBean.removerAviao}"
update=":helloForm:outputPanelConteudo">
<f:setPropertyActionListener value="#{aviao}"
target="#{listaAvioesBean.selectedAviao}" />
</p:commandButton>
</p:column>
</p:dataTable>
</ui:composition>
Managed bean (ListaAvioesBean.java)
package br.com.erp.beans;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.event.ActionEvent;
import br.com.erp.object.Aviao;
#ManagedBean(name="listaAvioesBean")
#ViewScoped
public class ListaAvioesBean implements Serializable{
/**
*
*/
private static final long serialVersionUID = 8076960891132613195L;
private Aviao selectedAviao;
private List<Aviao> aviao;
public ListaAvioesBean(){
aviao = new ArrayList<Aviao>();
System.out.println("ListaAvioesBean Criado!");
}
#PostConstruct
public void init(){
System.out.println("Iniciando o bean!");
populateListAvioes();
}
public void executa(){
System.out.println("Executou");
}
private void populateListAvioes(){
Aviao av1 = new Aviao();
av1.setMarca("Marca1");
av1.setModelo("M1");
av1.setNumeroSerie("1234");
aviao.add(av1);
av1 = new Aviao();
av1.setMarca("Marca2");
av1.setModelo("M2");
av1.setNumeroSerie("1111");
aviao.add(av1);
av1 = new Aviao();
av1.setMarca("Marca3");
av1.setModelo("M3");
av1.setNumeroSerie("4321");
aviao.add(av1);
}
public Aviao getSelectedAviao() {
return selectedAviao;
}
public void setSelectedAviao(Aviao selectedAviao) {
this.selectedAviao = selectedAviao;
}
public List<Aviao> getAviao() {
return aviao;
}
public void setAviao(List<Aviao> aviao) {
this.aviao = aviao;
}
public void removerAviao(){
boolean removeu = aviao.remove(selectedAviao);
if(removeu)
System.out.println("AviĆ£o removido com sucesso");
}
public void executa(ActionEvent e){
System.out.println();
}
}

Resources