I have a button outside the datatable form which function is to delete the selected row, but the problem is that it returns an empty value of that row in the backing bean, the update of the growl message is done correctly and the action is called too.
However when putting the button inside the form it works fine, but I need it to be in the toolbar which is outside the form.
This is my xhtml code:
<ui:define name="content">
<div class="row">
<p:toolbar id="tb">
<f:facet name="left">
<p:inputText style="margin-right:10px" placeholder="Rechercher..." />
<p:commandButton icon="fa fa-search" />
</f:facet>
<f:facet name="right">
<p:commandButton onclick="PF('analyseForm').show();" icon="fa fa-plus" />
<p:commandButton icon="fa fa-file-pdf-o" />
<p:commandButton process="#this,:form:anaDT" update=":form" action="#{personel.removeSelectedAnalyse}" icon="fa fa-trash-o" />
<!-- this button does the update and runs the action but returns a null value of the selected row-->
</f:facet>
</p:toolbar>
</div>
<div class="row">
<h:form id="form">
<p:growl id="msgs" />
<p:dataTable style="font-size:12px;" id="anaDT" scrollable="true" scrollWidth="100%" var="ana" value="#{personel.analyses}" paginator="true" selectionMode="single" selection="#{personel.selectedAnalyse}" paginatorPosition="bottom" rowKey="#{ana.idAnalyse}"
rows="10">
<!-- columns here -->
<f:facet name="footer">
<!-- this button works fine -->
<p:commandButton class="btn btn-default" process="form:anaDT" update="form" ajax="true" icon="fa fa-trash-o" action="#{personel.removeSelectedAnalyse}" />
</f:facet>
</p:dataTable>
</h:form>
</div>
<p:sticky target=":tb" margin="50" />
</ui:define>
</ui:composition>
Command button outside of a form can not be used to submit a form. If you want to achieve the functionality you desire, one way is to
Have a p:remoteCommand inside the form and bind it to the backing bean method personel.removeSelectedAnalyse and have update="#form"
Invoke the remoteCommand from the command button from the tool bar using onclick attribute and the remoteCommand submits the form. Now the backing bean will have the submitted values from the form so you can do the necessary processing and the form will be updated after the Ajax request completes.
Remote Command showcase: https://www.primefaces.org/showcase/ui/ajax/remoteCommand.xhtml
I've changed the rowKey to the entity type, assigning an unique id to the form. There is no need to process the form at the p:commandButton click. I place this button into a <h:form>. Command components always must be there. The entity selection done at row click. When you click on the button it uses the preset entity to remove from the List. Just the rerendering of the <p:dataTable> is needed. And I move the controller into the javax.faces.view.ViewScope. PrimeFaces component use ajax by default so the controllers must be at least as wide scope as view.
The facelet:
?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"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<div class="row" >
<h:form id="toolbarForm">
<p:toolbar id="tb">
<f:facet name="left">
<p:commandButton value="Delete selected User" process="#this" update="myForm" actionListener="#{myBean.deleteUser}"/>
</f:facet>
</p:toolbar>
</h:form>
</div>
<h:form id="myForm">
<p:dataTable id="usersTable" value="#{myBean.users}" var="user" selectionMode="single" selection="#{myBean.selectedUser}" rowKey="#{user}">
<p:column>
<f:facet name="header">ID</f:facet>
#{user.id}
</p:column>
<p:column>
<f:facet name="header">First name</f:facet>
#{user.firstName}
</p:column>
<p:column>
<f:facet name="header">Last name</f:facet>
#{user.lastName}
</p:column>
</p:dataTable>
</h:form>
</h:body>
</html>
The controller:
package x;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.inject.Named;
import javax.faces.view.ViewScoped;
import lombok.Data;
#Data
#Named( value = "myBean" )
#ViewScoped
public class MyBean implements Serializable
{
private List<User> users;
private User selectedUser;
public MyBean()
{
users = new ArrayList<>();
users.add( new User( 1, "First1", "Last1" ) );
users.add( new User( 2, "First2", "Last2" ) );
users.add( new User( 3, "First3", "Last3" ) );
users.add( new User( 4, "First4", "Last4" ) );
users.add( new User( 5, "First5", "Last5" ) );
}
#PostConstruct
public void init()
{
System.out.println( "MyBean.init() called" );
}
public void deleteUser()
{
if ( selectedUser == null )
System.out.println( "Selected User is null" );
else
System.out.println( "The ID of the User to remove: " + Integer.toString( selectedUser.getId() ) );
boolean bn = users.remove( selectedUser );
}
}
The User class:
package x;
import lombok.Data;
#Data
public class User
{
private int id;
private String firstName;
private String lastName;
public User( int id_, String firstName_, String lastName_ )
{
id = id_;
firstName = firstName_;
lastName = lastName_;
}
}
The source contains lombok annotations to avoid boilerplate coding (getter/setter methods)
Related
I've got the following issue. I have a XHTML:
<ui:composition 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"
template="../layout.xhtml">
<ui:define name="header">
<div id="header">
Abfragen
</div>
</ui:define>
<ui:define name="main">
<p:toolbar>
<p:toolbarGroup>
<p:commandButton value="Neu" icon="pi pi-plus" actionListener="#{abfrageHandler.newAbfrage}"
update="manage-queries-content" oncomplete="PF('manageQueriesDialog').show()"
styleClass="ui-button-success" style="margin-right: .5rem">
<p:resetInput target=":ucmdbform:ucmdbtab:manage-ucmdb-queries-content"/>
</p:commandButton>
</p:toolbarGroup>
</p:toolbar>
<p:dataTable id="dt-queries" widgetVar="dtQueries" reflow="true" showGridlines="true" size="small"
var="querie" value="#{abfrageHandler.abfragen}">
<p:column headerText="Abfrage">
<h:outputText value="#{querie.name}" />
</p:column>
<p:column headerText="TQL">
<h:outputText value="#{querie.tql}" />
</p:column>
<p:column headerText="Zyklus">
<h:outputText value="#{querie.zyklus}" />
</p:column>
<p:column headerText="Typ">
<h:outputText value="#{querie.typ}" />
</p:column>
<p:column exportable="false">
<p:commandButton icon="pi pi-pencil" update="manage-queries-content"
oncomplete="PF('manageQueriesDialog').show()"
styleClass="edit-button rounded-button ui-button-success" process="#this">
<f:setPropertyActionListener value="#{querie}" target="#{abfrageHandler.selected}"/>
<p:resetInput target="manage-queries-content"/>
</p:commandButton>
<p:commandButton icon="pi pi-search" actionListener="#{abfrageHandler.startAbfrage(querie)}"
styleClass="edit-button rounded-button ui-button-success" process="#this">
</p:commandButton>
<p:commandButton class="ui-button-warning rounded-button" icon="pi pi-trash" process="#this"
oncomplete="PF('deleteQuerieDialog').show()">
<f:setPropertyActionListener value="#{querie}" target="#{abfrageHandler.selected}"/>
</p:commandButton>
</p:column>
</p:dataTable>
<p:dialog header="Abfrage" showEffect="fade" modal="true" width="600px"
widgetVar="manageQueriesDialog" responsive="true">
<p:outputPanel id="manage-queries-content" class="ui-fluid">
<p:outputPanel rendered="#{not empty abfrageHandler.selected}">
<div class="p-field">
<p:outputLabel for="abfName">Name</p:outputLabel>
<p:inputText id="abfName" value="#{abfrageHandler.selected.name}" required="true"/>
</div>
<div class="p-field">
<p:outputLabel for="abfTql">TQL</p:outputLabel>
<p:inputText id="abfTql" value="#{abfrageHandler.selected.tql}" required="true"/>
</div>
<div class="p-field">
<p:outputLabel for="abfZyklus">Zyklus</p:outputLabel>
<p:inputText id="abfZyklus" value="#{abfrageHandler.selected.zyklus}" required="true"/>
</div>
<div class="p-field">
<p:outputLabel for="#next">Abfrageart</p:outputLabel>
<p:selectOneMenu id="abfTyp" value="#{abfrageHandler.selected.typ}" required="false">
<f:selectItem itemLabel="Eins wählen" itemValue=""/>
<f:selectItems value="#{abfrageHandler.requestResolutions}" var="reso"
itemLabel="#{reso.toString()}" itemValue="#{reso}"/>
</p:selectOneMenu>
</div>
</p:outputPanel>
</p:outputPanel>
<f:facet name="footer">
<p:commandButton value="Speichern" icon="pi pi-check" actionListener="#{abfrageHandler.saveAbfrage}"
update="manage-queries-content" process="manage-queries-content #this"/>
<p:commandButton value="Abbruch" icon="pi pi-times" onclick="PF('manageQueriesDialog').hide()"
class="ui-button-secondary"/>
</f:facet>
</p:dialog>
<p:confirmDialog widgetVar="deleteQuerieDialog" showEffect="fade" width="300"
message="TQL wirklich löschen?" header="Bestätigen" severity="warn">
<p:commandButton value="Ja" icon="pi pi-check" actionListener="#{abfrageHandler.deleteParameter}"
process="#this" oncomplete="PF('deleteQuerieDialog').hide()"/>
<p:commandButton value="Nein" type="button" styleClass="ui-button-secondary" icon="pi pi-times"
onclick="PF('deleteQuerieDialog').hide()"/>
</p:confirmDialog>
</ui:define>
</ui:composition>
And the following bean in the backend:
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;
import javax.annotation.PostConstruct;
import javax.faces.view.ViewScoped;
import javax.inject.Named;
import org.primefaces.PrimeFaces;
import main.java.ucmdbtool.RequestResolutions;
import main.java.ucmdbtool.UcmdbAbfrageInteface;
import main.java.ucmdbtool.table.Abfrage;
import main.java.ucmdbtool.table.UcmdbAbfTableHandler;
#SuppressWarnings("serial")
#Named("abfrageHandler")
#ViewScoped
public class AbfrageHandler implements Serializable {
private List<Abfrage> abfragen = new ArrayList<>();
private Abfrage selected;
private RequestResolutions[] requestResolutions;
#PostConstruct
private void init() {
abfragen = UcmdbAbfTableHandler.getAbfragen();
requestResolutions = RequestResolutions.values();
}
public void newAbfrage() {
selected = new Abfrage();
}
public void saveAbfrage() {
if (selected.getPk() == null) {
selected.setPk(UUID.randomUUID());
UcmdbAbfTableHandler.insertAbfrage(selected);
abfragen.add(selected);
}
else {
UcmdbAbfTableHandler.updateAbfrage(selected);
}
PrimeFaces.current().executeScript("PF('manageQueriesDialog').hide()");
PrimeFaces.current().ajax().update("dt-queries");
}
public void startAbfrage(Abfrage abf) {
UcmdbAbfrageInteface.doRequest(abf);
}
public void deleteAbfrage() {
if(selected != null) {
UcmdbAbfTableHandler.deleteAbfrage(selected);
abfragen.remove(selected);
}
PrimeFaces.current().ajax().update("dt-queries");
}
public List<Abfrage> getAbfragen() { return abfragen; }
public Abfrage getSelected() { return selected; }
public RequestResolutions[] getRequestResolutions() { return requestResolutions; }
public void setSelected(Abfrage selected) { this.selected = selected; }
}
I've included all imports, because maybe one is off a false package. My problem is, if I click on new the dialog stays empty, because he thinks the object is empty. When I click on the edit button the object is loaded, but I can't save it because abfTyp is empty (it was required="true"), after I set required to false I could save, but my object had the old data and not the date I had changed. I have an almost similar page which is working fine and I can't find the difference. RequestResolutions is a stupid ENUM without any functions.
The dialog is empty when using "neu" because you create a new version of "selected" each time. The old data is reappearing on "edit" because the previous time failed the validation, but you immediately close the dialog. Then you use p:resetInput which resets back to the stored value. If the selectList value is empty, it means that what's coming from the data source does not match any values in the Enum select list that you provide.
I had a number of issues getting the sample to work... missing form, update= having bad references. But I think the main design issue is that you're not displaying any validation errors in the dialog - just closing the dialog window immediately. And, by the way, you should mostly be using action= on command buttons, not actionListener=. See here to understand why. All field validation will have passed before the action method gets executed.
I suggest the following amendments:
<p:commandButton value="Neu" icon="pi pi-plus" action="#{abfrageHandler.newAbfrage}"
update=":ucmdbform:manage-queries-content"
oncomplete="PF('manageQueriesDialog').show()"
styleClass="ui-button-success" style="margin-right: .5rem">
<!-- <p:resetInput target=":ucmdbform:manage-queries-content"/> -->
</p:commandButton>
.
.
<p:commandButton value="Speichern" icon="pi pi-check"
action="#{abfrageHandler.saveAbfrage}"
update=":ucmdbform:dt-queries :ucmdbform:manage-queries-content"
oncomplete="if ( args.saved == 1 ) { PF('manageQueriesDialog').hide()};"/>
Plus all actionListeners="..." --> action="..."; plus add p:message to all dialog fields that could possibly fail validation.
public void saveAbfrage() {
if (selected.getPk() == null) {
selected.setPk(UUID.randomUUID());
UcmdbAbfTableHandler.insertAbfrage(selected);
abfragen.add(selected);
} else {
UcmdbAbfTableHandler.updateAbfrage(selected);
}
PrimeFaces.current().ajax().addCallbackParam("saved", 1);
// PrimeFaces.current().ajax().update(":ucmdbform:dt-queries");
// PrimeFaces.current().executeScript("PF('manageQueriesDialog').hide();");
}
In the form below a person can be entered along with cars. The user can e.g. remove cars by clicking the "minus" commandButton an a row of the dataTable. However,
when the "minus" commandButton is immediate=false then the removal of cars does not work since validation kicks in (lastname of person is required) which is working as expected.
when it is immediate=true, then the save does not work properly. Example: three cars are in the list and "Ford" (being second in the list) is removed. The removal seems to work fine and the browser correctly reflects the change. When saving is triggered via the savePerson - method, however, it shows that the last car in the list (which was Toyota) was removed and not Ford. What can I do to have the changes being reflected when saving the person?
Log-output from bean below:
removing car Car{brand='Ford'}
remaining car Car{brand='Porsche'}
remaining car Car{brand='Toyota'}
saving person
saving car Car{brand='Porsche'}
saving car Car{brand='Ford'}
JSF
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition template="/META-INF/templates/template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<ui:define name="content">
<h:form id="formChanges">
<p:accordionPanel id="accPanel">
<p:tab title="Cars">
<p:panelGrid columns="2">
<f:facet name="header">Person</f:facet>
<p:outputLabel value="Last" for="last"/>
<p:inputText id="last" value="#{table.person.last}" required="true"/>
<p:outputLabel value="First" for="first"/>
<p:inputText id="first" value="#{table.person.first}"/>
</p:panelGrid>
<p:dataTable var="car" value="#{table.person.cars}">
<p:column>
<f:facet name="header">Brand</f:facet>
<p:inputText value="#{car.brand}"/>
</p:column>
<p:column>
<f:facet name="header">Options</f:facet>
<p:commandButton value="#{msgs.minus}"
action="#{table.removeCar(car)}"
immediate="true"
update="formChanges:accPanel"/>
</p:column>
</p:dataTable>
<p:commandButton value="#{msgs.plus}" action="#{table.addCar}"
immediate="true" update="formChanges:accPanel"/>
<p:spacer height="10"/>
<p:commandButton id="save" value="#{msgs.save}" icon="ui-icon-check"
action="#{table.savePerson}" ajax="false"/>
</p:tab>
</p:accordionPanel>
</h:form>
</ui:define>
</ui:composition>
Bean
import com.google.common.collect.Lists;
import de.dgr.question.Car;
import de.dgr.question.Person;
import org.slf4j.Logger;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.inject.Inject;
import java.io.Serializable;
import java.util.List;
#ManagedBean(name = "table")
#ViewScoped
public class TableController implements Serializable {
#Inject
private Logger log;
private Person person;
#PostConstruct
public void init() {
List<Car> cars = Lists.newArrayList(new Car("Porsche"), new Car("Ford"), new Car("Toyota"));
person = new Person();
person.setCars(cars);
}
public String savePerson() {
log.info("-> saving person");
for (Car car : person.getCars()) {
log.info("saving car {}", car);
}
return null;
}
public String removeCar(final Car carToDelete) {
log.info("removing car {}", carToDelete);
person.getCars().remove(carToDelete);
for (Car car : person.getCars()) {
log.info("remaining car {}", car);
}
return null;
}
public String addCar() {
log.info("adding empty car");
person.getCars().add(new Car());
return null;
}
public Person getPerson() {
return person;
}
public void setPerson(final Person person) {
this.person = person;
}
}
Thanks to the links BalusC provided me with I implemented the below solution.
immediate = true is wrong in any case since when entering new cars and then deleting one of them the model (components) needs to be updated with the form data. Otherwise, the data already filled in the form would get lost when adding/removing a car (plus/minus commandButton).
That means that all input components of the form need to be processed, including the required component "last" in order to update the model with that data. To avoid validation of the required component "last" when a car is added/removed and to validate only when the save button is klicked the solution of [How to let validation depend on the pressed button? is used.
That last point, however, seems to work only when ajax="false" is not specified. If so, then param[save.clientId] seems always to be empty. Only when ajax="true" (which is the default) will the parameter have a value.
Change jsf page:
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition template="/META-INF/templates/template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<ui:define name="content">
<h:form id="formChanges" prependId="false">
<p:accordionPanel id="accPanel" prependId="false">
<p:tab title="Cars">
<h:panelGroup id="panelNewData">
<p:panelGrid columns="2">
<f:facet name="header">Person</f:facet>
<p:outputLabel value="Last" for="last"/>
<p:inputText id="last" value="#{table.person.last}"
required="#{not empty param[save.clientId]}" />
<p:outputLabel value="First" for="first"/>
<p:inputText id="first" value="#{table.person.first}"/>
</p:panelGrid>
<p:dataTable var="car" value="#{table.person.cars}">
<p:column>
<f:facet name="header">Brand</f:facet>
<p:inputText value="#{car.brand}"/>
</p:column>
<p:column>
<f:facet name="header">Options</f:facet>
<p:commandButton value="#{msgs.minus}"
action="#{table.removeCar(car)}"
process="panelNewData"
update="panelNewData"/>
</p:column>
</p:dataTable>
<p:commandButton value="#{msgs.plus}" action="#{table.addCar}"
process="panelNewData" update="accPanel"/>
<p:spacer height="10"/>
<p:commandButton id="save" binding="#{save}" value="#{msgs.save}"
icon="ui-icon-check" action="#{table.savePerson}"
update="accPanel"/>
</h:panelGroup>
</p:tab>
</p:accordionPanel>
</h:form>
</ui:define>
</ui:composition>
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
I'm learning about JSF and am trying to do a tabbed pane following this tutorial:
Tab manager using Ajax and JSF
I have managed to get the tab switch working. Now I want to include a form defined in another XHTML file as tab for this tabbed pane in which there's a dataTable with a commandButton to delete the selected row, called clientes.xhtml. If I navigate directly to this page then delete button works as expected. But when I include this page within contentForm it shows as expected but delete button doesn't do what is supposed to do, it just refresh the current page but no row is deleted.
This is what I have so far:
welcome.xhtml
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns="http://www.w3.org/1999/xhtml"
template="./templates/BasicTemplate.xhtml">
<ui:define name="menu_bar">
<h:form id="formMenu">
<ul id="menu-list">
<li><h:commandLink value="Home">
<f:ajax event="click" render=":contentForm" listener="#{tabViewManagedBean.setTabIndex(0)}" />
</h:commandLink></li>
<li><h:commandLink value="Clientes">
<f:ajax event="click" render=":contentForm" listener="#{tabViewManagedBean.setTabIndex(1)}" />
</h:commandLink></li>
<li><h:commandLink value="Proveedores">
<f:ajax event="click" render=":contentForm" listener="#{tabViewManagedBean.setTabIndex(2)}" />
</h:commandLink></li>
</ul>
</h:form>
</ui:define>
<ui:define name="content">
<h:form id="contentForm">
<h:panelGroup layout="block" rendered="#{tabViewManagedBean.tabIndex == 0}">
<h1>Hi there!</h1>
<hr />
</h:panelGroup>
<h:panelGroup layout="block" rendered="#{tabViewManagedBean.tabIndex == 1}">
<ui:include src="clientes.xhtml" />
</h:panelGroup>
<h:panelGroup layout="block" rendered="#{tabViewManagedBean.tabIndex == 2}">
<ui:include src="proveedores.xhtml" />
</h:panelGroup>
</h:form>
</ui:define>
</ui:composition>
clientes.xhtml
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns="http://www.w3.org/1999/xhtml">
<h:form>
<h:dataTable id="dataTable" value="#{clientesManagedBean.listaClientes}" var="cliente">
<h:column>
<f:facet name="header">
<h:outputText value="Id" />
</f:facet>
<h:outputText value="#{cliente.idCliente}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Fecha de ingreso" />
</f:facet>
<h:outputText value="#{cliente.fechaIngreso}">
<f:convertDateTime pattern="dd/MM/yyyy"/>
</h:outputText>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Nombre" />
</f:facet>
<h:outputText value="#{cliente.nombre}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Domicilio" />
</f:facet>
<h:outputText value="#{cliente.domicilio}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Teléfono" />
</f:facet>
<h:outputText value="#{cliente.telefono}" />
</h:column>
<h:column>
<f:facet name="header" />
<h:commandButton image="./resources/css/delete_16.png" action="#{clientesManagedBean.eliminarCliente(cliente)}"/>
</h:column>
</h:dataTable>
</h:form>
</ui:composition>
Edit 1
Here is the ClientesManagedBean code:
ClientesManagedBean.java
import beans.interfaces.IClientesBeanLocal;
import domain.entities.ClienteJpa;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.ejb.EJB;
import javax.faces.bean.ManagedBean;
import javax.faces.view.ViewScoped;
#ManagedBean
#ViewScoped
public class ClientesManagedBean {
#EJB(beanName = "ClientesBeanJpa")
private IClientesBeanLocal clientesBeanLocal;
private List<ClienteJpa> listaClientes;
private ClienteJpa cliente;
#PostConstruct
public void init() {
listaClientes = new ArrayList<>();
listaClientes.addAll(clientesBeanLocal.getTodos());
}
public List<ClienteJpa> getListaClientes() {
return listaClientes;
}
public ClienteJpa getCliente() {
return cliente;
}
public void eliminarCliente(ClienteJpa cliente) {
if(clientesBeanLocal.eliminar(cliente) == IClientesBeanLocal.EXITO) {
listaClientes.remove(cliente);
}
}
}
And ClientesBeanJpa session bean, just in case:
ClientesBeanJpa.java
import beans.interfaces.IClientesBeanLocal;
import domain.entities.ClienteJpa;
import javax.ejb.Stateless;
import javax.ejb.TransactionAttribute;
import javax.ejb.TransactionAttributeType;
import javax.persistence.EntityManager;
import javax.persistence.PersistenceContext;
#Stateless(name = "ClientesBeanJpa")
public class ClientesBeanJpa implements IClientesBeanLocal {
#PersistenceContext(unitName = "CursoJ2eePU")
private EntityManager entityManager;
#Override
#TransactionAttribute(TransactionAttributeType.REQUIRED)
public int eliminar(ClienteJpa cliente) {
if(entityManager == null) {
String error = "Error al inyectar EntityManager en la clase " + getClass().getCanonicalName();
throw new ExceptionInInitializerError(error);
} else {
ClienteJpa clienteAEliminar = entityManager.getReference(ClienteJpa.class, cliente.getIdCliente());
entityManager.remove(clienteAEliminar);
return EXITO;
}
}
}
Edit 2
Based on #Luiggi's suggestion I've tested if ClientesManagedBean#eliminar(cliente) method is even called and I've found this out:
If tabIndex property is set to 1 by default, then clientes.xhtml is rendered and it works as expected.
If tabIndex property is set to another value and then navigate to tab 1, then eliminar(cliente) is not even called.
Including TabViewManagedBean code just in case.
TabViewManagedBean.java
import javax.faces.bean.ManagedBean;
import javax.faces.view.ViewScoped;
#ManagedBean
#ViewScoped
public class TabViewManagedBean {
private Integer tabIndex = 0;
/*
* If I set tabIndex to 1 then clientes.xhtml is rendered by default
* and everithing works as expected.
* But if I set this property to 0 and then navigate to tab 1 then it
* behaves as described.
*/
public TabViewManagedBean() {
super();
}
public Integer getTabIndex() {
return tabIndex;
}
public void setTabIndex(Integer tabIndex) {
this.tabIndex = tabIndex;
}
}
The problem is that you're nesting <form>, which is invalid HTML. This can be noted by this code:
welcome.xhtml:
<ui:define name="content">
<h:form id="contentForm">
<!-- code here... -->
<h:panelGroup layout="block" rendered="#{tabViewManagedBean.tabIndex == 1}">
<!-- including source of clientes.xhtml page -->
<ui:include src="clientes.xhtml" />
</h:panelGroup>
<!-- code here... -->
</h:form>
</ui:define>
And in clientes.xhtml you have:
<h:form>
<h:dataTable id="dataTable" value="#{clientesManagedBean.listaClientes}" var="cliente">
<!-- more code... -->
</h:dataTable>
<h:form>
Which ends in this way:
<h:form id="contentForm">
<!-- code here... -->
<h:panelGroup layout="block" rendered="#{tabViewManagedBean.tabIndex == 1}">
<h:form>
<h:dataTable id="dataTable" value="#{clientesManagedBean.listaClientes}" var="cliente">
<!-- more code... -->
</h:dataTable>
<h:form>
</h:panelGroup>
<!-- code here... -->
</h:form>
Decide where to define the <h:form> to not have nested forms. IMO you should define the <h:form> in the narrowest possible scope, which in this case will be in clientex.xhtml page only (and in the pages to include).
More info:
commandButton/commandLink/ajax action/listener method not invoked or input value not updated (your scenario resembles case 2 of the accepted answer)
I have got some problems with my JSF page, and (probably) with backing bean. I have got own template and I fill the content area with some pages. I have got search page with commandbutton and I would like to get data from database (JPA) and than fill the datatable.
Look at my searchpeople.xhtml:
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
template="template.xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<ui:define name="content">
<h:form id="sampleform">
<p:accordionPanel activeIndex="-1" id="accordingpanle">
<p:tab title="User options" >
<p:growl id="growl" showDetail="true" showSummary="true"/>
<p:commandButton id="searchbutton" action="#{mb_person.search}" value="Szukaj" update="personsearchresulttable" />
</p:tab>
</p:accordionPanel>
<p:dataTable id="personsearchresulttable" var="person" value="#{mb_person.people}" widgetVar="personTable" style="margin-top: 10px" >
<p:column headerText="Id" style="width:10%">
<h:outputText value="#{person.id}" />
</p:column>
<p:column headerText="Name" style="width:20%">
<h:outputText value="#{person.name}" />
</p:column>
<p:column headerText="Surname" style="width:20%">
<h:outputText value="#{person.surname}" />
</p:column>
<p:column headerText="Company">
<h:outputText value="#{person.companyName}" />
</p:column>
<p:column style="width:4%" headerText="Open">
<h:link outcome="persondetails" value="Open">
<!--<f:param name="personid" value="#{person.id}"/>-->
<f:param name="personid" value="10076"/>
</h:link>
</p:column>
</p:dataTable>
</h:form>
</ui:define>
</ui:composition>
And my backingbean with EJB injection.
#ManagedBean(name="mb_person")
public class MB_Person implements Serializable{
#EJB
private PersonFacade personFacade;
private List<PersonAndCompany> people = new ArrayList<PersonAndCompany>();
public MB_Person() {
}
public List<PersonAndCompany> getPeople() {
return people;
}
public void setPeople(List<PersonAndCompany> people) {
this.people = people;
}
public void search() {
int[] range = {0,5};
setPeople(personFacade.findPersonWithMoreThanXProjects(20));
setPeople(personFacade.findPersonAndCompanyName(range));
for(PersonAndCompany p:people){
System.out.println(p.getName());
}
}
public String goToPersonDatailPage(int id){
return "persondetails.jsf?personid="+id;
}
}
I tried small test and printout all data in method search and I received good results.
Someone can help me how to update dataTable using ajax? In this form I have got an exception
Cannot find component with identifier "personsearchresulttable" referenced from "sampleform:accordingpanle:searchbutton".
Relative client IDs are searched relative to parent NamingContainer component. The <p:accordionPanel> is by itself a NamingContainer. So the relative client ID personsearchresulttable would be searched inside the context of the <p:accordionPanel>. However, it's actually outside the panel, inside the <h:form>.
You need to change the relative client ID to be an absolute client ID.
update=":sampleform:personsearchresulttable"
See also:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"