I have p:wizard inside a dialog. When I click on the next button, nothing happens. I've even put h:messages to catch any validation problems. But nothing appears. Here's my code:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:cc="http://java.sun.com/jsf/composite"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<cc:interface>
<cc:attribute name="actionNewComplete" required="false"/>
<cc:attribute name="update" required="false"/>
</cc:interface>
<cc:implementation>
<h:form prependId="false" id="formCreateOffre">
<h:messages showDetail="true"/>
<p:wizard id="wizardOffre" widgetVar="widgetWizardOffre" showNavBar="false" flowListener="#{offreController.handleFlow}">
<p:tab id="tabOffre" title="Offre">
<p:panelGrid styleClass="ui-net-table">
<p:row>
<p:column>
<p:outputLabel value="#{bundle.CreateOffreLabel_participant}" for="participant" />
<p:inputText styleClass="text" style="width: 50px;" id="participant" value="#{offreController.selected.participant}" title="#{bundle.CreateOffreTitle_participant}" />
</p:column>
</p:row>
<p:row>
<p:column>
<p:outputLabel value="#{bundle.CreateOffreLabel_rendezvous}" for="rendezvous" />
<p:calendar styleClass="text" id="rendezvous" value="#{offreController.selected.rendezvous}" disabled="#{offreController.selected.realisation eq null}" title="#{bundle.CreateOffreTitle_rendezvous}">
<p:ajax event="dateSelect" update="delais"/>
</p:calendar>
</p:column>
</p:row>
</p:panelGrid>
</p:tab>
<p:tab id="tabOffreClient" title="Client">
clients
</p:tab>
<p:tab id="tabOffreActivite" title="Activité">
activités
</p:tab>
<p:tab id="tabOffreService" title="Service">
services
</p:tab>
</p:wizard>
<p:commandButton value="Précédent" onclick="widgetWizardOffre.back();" icon="ui-icon-seek-prev"/>
<p:commandButton value="Suivant" onclick="widgetWizardOffre.next();" icon="ui-icon-seek-next" iconPos="right"/>
</h:form>
</cc:implementation>
</html>
Here is the code of the bean.
#ManagedBean(name = "offreController")
#SessionScoped
public class OffreController extends AbstractController<Offre> {
#ManagedProperty(value = "#{navigationController}")
private NavigationController navigation;
#EJB
private app.tfe.netescape.business.OffreFacade ejbFacade;
public OffreController() {
}
public String handleFlow(FlowEvent event) {
return event.getNewStep();
}
The flowListener method is called and returns the next step but nothing happens.
Make sure you have a getter and setter for every bean property you reference in your code. PrimeFaces will fail ungracefully on the wizard step in exactly this manner if it is unable to find both a getter and a setter - even for properties which you are only reading.
Addendum: also, the getters and setters should only do a get and a set of a local value. PrimeFaces doesn't handle other getters and setters well (I cannot explain why this doesn't work, but I've certainly observed it). If you have any additional logic, it should be processed in your listeners.
what version of primefaces did you use?
If is version 5.1 change the event onclick:
onclick="widgetWizardOffre.next();"
by --->
onclick="PF('widgetWizardOffre').next();"
and use same for the event back: onclick="PF('widgetWizardOffre').back();"
Your are already hiding the Navigation bar (next&back buttons), How can the navigation bar work then? Remove showNavBar="false", it's true by default .
Related
I have a big problem with Primefaces accordion.
I have an outputPanel with an header and an accordion with 2 tabs.
If I close the first tab and change a field in the second tab, it open the first tab and close the second. How can I keep the status of the tabs?
This is a simple example:
<p:outputPanel id="content">
<p:outputPanel id="header" />
<p:accordionPanel multiple="true">
<p:tab title="firstTab">
<p:panel>
<p:inputText id="firstInput" value="firstInput">
<p:ajax event="change" update="content" />
</p:inputText>
</p:panel>
</p:tab>
<p:tab title="secondTab">
<p:panel>
<p:inputText id="secondInput" value="secondInput">
<p:ajax event="change" update="content" />
</p:inputText>
</p:panel>
</p:tab>
</p:accordionPanel>
</p:outputPanel>
How can i resolve it? Any suggestion?
AccordionPanel has an attribute called activeIndex, you could set this attribute from your MB so it doesn´t change after an update. See for instance https://www.primefaces.org/docs/vdl/6.1/core/primefaces-p/accordionPanel.html
Based on cagatay civici's answer provided in the link by #Christian I created a simple example, because it was not working out of the box for me.
The example.xthml:
<h:form styleClass="accordionForm">
<p:accordionPanel multiple="true"
activeIndex="#{sessionBean.activeTabs}">
<p:ajax event="tabChange" />
<p:ajax event="tabClose" />
<p:tab title="Tab1">
<p:panel>
<p:inputText id="firstInput" value="firstInput">
<p:ajax event="change" update="#(.accordionForm)" />
</p:inputText>
</p:panel>
</p:tab>
<p:tab title="Tab2">
<p:panel>
<p:inputText id="secondInput" value="secondInput">
<p:ajax event="change" update="#(.accordionForm)" />
</p:inputText>
</p:panel>
</p:tab>
</p:accordionPanel>
</h:form>
The sessionBean.java:
#Named("sessionBean")
#SessionScoped
public class SessionBean implements Serializable {
private static final long serialVersionUID = 1L;
private String activeTabs = "";
public String getActiveTabs() {
return activeTabs;
}
public void setActiveTabs(String activeTabs) {
this.activeTabs = activeTabs;
}
}
Explanation:
The two p:ajax tags trigger a POST request if a tab is either opened ("tabChange") or closed ("tabClosed"), since this is the default action for the accordionPanel. Hence, I wrapped the p:accordionPanel with an h:form. If you inspect your network traffic you can see how the list of active tabs is sent to the server.
Bear in mind that I update the surrounding form instead of the accordionPanel itself. Therefore, I use Primefaces Selectors.
In an application based on jsf 2.1 and Primefaces 6.1.5, I have difficulties implementing a <p:selectCheckboxMenu
I simplified the code according to the instructions here How to create a Minimal, Complete, and Verifiable example
My code now looks quite similar to the code in the Primefaces Showcase.
Primefaces Showcase
After much analyzing, I can describe 'erratic' a bit better. When deselecting an item, the item following it is affected. The last item is not affected at all. And the first item can never be deselected. It seems like a bug in the use of indices.
Can anyone confirm this and perhaps suggest a Workaround?
Here is the xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<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">
<h:form id="form">
<p:panel>
<p:selectCheckboxMenu id="testSCM"
value="#{myForm.testList}"
multiple="true"
label="Choose item..."
updateLabel="true">
<f:selectItems var="s" value="#{myForm.testItems}" itemLabel="#{s}" />
</p:selectCheckboxMenu>
</p:panel>
<p:commandButton value="Submit" update="displayItems" oncomplete="PF('itemDialog').show()" style="margin-top:10px;" />
<p:dialog header="Selected Items" modal="true" showEffect="fade" hideEffect="fade" widgetVar="itemDialog" width="250">
<p:outputPanel id="displayItems">
<p:dataList value="#{myForm.statusList}" var="item" emptyMessage="No items selected">
<f:facet name="header">
Status
</f:facet>
#{item}
</p:dataList>
</p:outputPanel>
</p:dialog>
</h:form>
</ui:composition>
And this is the form:
#Named("myForm")
#SessionScoped
public class MyForm implements Serializable {
private String[] testList;
private List<String> testItems;
public String[] getTestList() {
return testList;
}
public void setTestList(String[] testList) {
this.testList = testList;
}
public List<String> getTestItems() {
return testItems;
}
public void setTestItems(List<String> testItems) {
this.testItems = testItems;
}
public void reset() {
testItems = new ArrayList<>();
testItems.add("Item1");
testItems.add("Item2");
testItems.add("Item3");
testItems.add("Item4");
testItems.add("Item5");
testItems.add("Item6");
}
}
The problem was caused by a bug in Primefaces version 6.1.5. The code works fine when downgrading to Version 6.0 or upgrading to Version 6.1.8, which is what I chose to do.
The problem is described in Primefaces issue tracker on github
I must do something fundamentally wrong, I stripped down the code to the bare minimum with a data table and enabling one column filter and a globe filter.
The funny thing is that the example code from Primefaces works. The only difference to my code should be that it gathers data from a DB rather than generating it in the bean.
I have no more clues why my example doesn't do anything when I type something in the filter would be appreciate any ideas here.
My xhtml:
<!DOCTYPE html>
<html xmlns="http://www.w3c.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="layout.xhtml">
<ui:define name="title">All Projects</ui:define>
<ui:define name="content">
<p:dataTable var="project" value="#{projectController.allProjects}" widgetVar="projectTable" filteredValue="#{projectController.filteredProjects}">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search all fields:" />
<p:inputText id="globalFilter" onkeyup="PF('projectTable').filter()" style="width:150px" />
</p:outputPanel>
</f:facet>
<p:column headerText="Name" filterBy="#{project.name}">
<h:outputText value="#{project.name}" />
</p:column>
<p:column headerText="Priority">
<h:outputText value="#{project.priority}" />
</p:column>
<p:column headerText="Exit">
<h:outputText value="#{project.exitCriteria}" />
</p:column>
</p:dataTable>
</ui:define>
</ui:composition>
My Bean:
package com.apa.projectd.common;
import java.io.Serializable;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.enterprise.context.SessionScoped;
import javax.faces.bean.ManagedBean;
import javax.inject.Inject;
import com.habony.common.Loggable;
import com.habony.projectd.ejbs.ProjectEJB;
import com.habony.projectd.enteties.Project;
#ManagedBean(name="projectController")
#SessionScoped
#Loggable
public class ProjectController implements Serializable{
private static final long serialVersionUID = 8345760187637787728L;
#Inject
private ProjectEJB projectEJB;
private List<Project> filteredProjects;
private List<Project> allProjects;
#PostConstruct
public void loadAllProjects(){
allProjects = projectEJB.getAllProjects();
}
//
// Getters and Setters
//
public List<Project> getFilteredProjects() {
return filteredProjects;
}
public void setFilteredProjects(List<Project> filteredProjects) {
this.filteredProjects = filteredProjects;
}
public void setAllProjects(List<Project> allProjects) {
this.allProjects = allProjects;
}
public List<Project> getAllProjects(){
return allProjects;
}
}
The filters features of p:dataTable need to be wrapped in <h:form> tags for work fine. The code xhtml modified would:
<!DOCTYPE html>
<html xmlns="http://www.w3c.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="layout.xhtml">
<ui:define name="title">All Projects</ui:define>
<ui:define name="content">
<h:form>
<p:dataTable var="project" value="#{projectController.allProjects}" widgetVar="projectTable" filteredValue="#{projectController.filteredProjects}">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search all fields:" />
<p:inputText id="globalFilter" onkeyup="PF('projectTable').filter()" style="width:150px" />
</p:outputPanel>
</f:facet>
<p:column headerText="Name" filterBy="#{project.name}">
<h:outputText value="#{project.name}" />
</p:column>
<p:column headerText="Priority">
<h:outputText value="#{project.priority}" />
</p:column>
<p:column headerText="Exit">
<h:outputText value="#{project.exitCriteria}" />
</p:column>
</p:dataTable>
</h:form>
</ui:define>
</ui:composition>
Please see lazy property this may be that your data not filter.
lazy="true" change lazy=false
finally I figured out that when you use Lazy the filtered data is not stored in other variable as in non lazy implementation, everytime you call a filter the load method is executed, so I had to put the filters also in my Load, also the sorting this is the way when using Lazy.
My mistake !
You should initialize filtredProjects with the same data that contains the ArrayList allProjects like this:
#PostConstruct
public void loadAllProjects(){
allProjects = projectEJB.getAllProjects();
filtredProjects = projectEJB.getAllProjects();
}
Do not use lazy loading when filtering and/or sorting
I am getting a null selected row when I press the showDialog command button
I can't see what is my problem
This is my first form:
<h:form id="firstForm">
<p:commandButton action="#{testBB.showDialog}" id="showDialog"
update=":secondForm" value="#{msg['show.dialog']}" />
</h:form>
This is my second form:
<h:form id="secondForm">
<p:dataTable id="testDatatable"
rendered="#{not empty testBB.list}"
rowKey="#{order.orderNumber}"
selection="#{testBB.selectedRow}"
selectionMode="single"
sortBy="customerName" value="#{testBB.list}" var="order">
<p:column headerText="#{msg['order.number']}">
<h:outputText value="#{order.orderNumber}" />
</p:column>
<p:column headerText="#{msg['total.value']}">
<h:outputText value="#{order.totalValue}" />
</p:column>
</p:dataTable>
</h:form>
My backing bean:
#ManagedBean
#ViewScoped
public class TestBB implements Serializable {
private List<Order> list;
private Order selectedRow;
public void showOrder() {
try {
System.out.println(selectedRow);
} catch (Exception exception) {
}
}
}
And my DTO:
public class Order implements Serializable {
private int orderNumber;
private double totalValue;
public void showOrder() {
try {
System.out.println(selectedRow);
} catch (Exception exception) {
}
}
/** Getters and setters */
}
What is wrong in my code?
Put
<p:ajax event="rowSelect" />
<p:ajax event="rowUnselect" />
inside your datatable for selection/unselection to happen as soon as click happens.
If you need selection only on button click use 'process' like this
<p:commandButton process=":secondForm:testDatatable" update=":secondForm"/>
You need to update the model on rowSelection. This can be done using a <p:ajax event="rowSelect" />. Here is how I think your Datatable should look like:
<p:dataTable id="testDatatable"
rendered="#{not empty testBB.list}"
rowKey="#{order.orderNumber}"
selection="#{testBB.selectedRow}"
selectionMode="single"
sortBy="customerName" value="#{testBB.list}" var="order">
<p:ajax event="rowSelect" />
<p:column headerText="#{msg['order.number']}">
<h:outputText value="#{order.orderNumber}" />
</p:column>
<p:column headerText="#{msg['total.value']}">
<h:outputText value="#{order.totalValue}" />
</p:column>
</p:dataTable>
A good example can be found here (Primefaces Demo).
As Kerem Baydogan suggested you have to include process attribute with your data table id in your command button.
If you are not including process attribute then no components will be processed in the component tree and no modal values will be updated hence you are getting selection as null.
I feel there is no need of updating data table if you are not changing its state.
Salut :), iam a newbie in primefaces and ajax
Iam using primefaces 3.4, glassfish 3.1, jsf2.0 and ejb 3. I tried to implement primefaces showcase datatable rowediting. But when i validate the updated value into the datatable, i get the old value. This is my code :
<h:form id="form">
<p:growl id="messages" showDetail="true"/>
<p:dataTable var="item" value="#{jSFMBean.allContacts}" id="contactList" editable="true">
<p:ajax event="rowEdit" listener="#{jSFMBean.onEdit}" update="#this :form:messages" />
<p:ajax event="rowEditCancel" listener="#{jSFMBean.onCancel}" update=":form:messages" />
<p:column headerText="EMAIL" style="width:125px">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{item.email}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{item.email}" label="EMAIL"/>
</f:facet>
</p:cellEditor>
</p:column><p:column headerText="Options" style="width:50px">
<p:rowEditor />
</p:column>
</p:dataTable>
<h:outputText value="#{jSFMBean.selectedContact.displayname}" />
the methods are :
public void onEdit(RowEditEvent event) {
this.session.updateContact((Contacts) event.getObject());
FacesMessage msg = new FacesMessage("Edition contact: ", ((Contacts) event.getObject()).getDisplayname());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
(Contacts) event.getObject() always get the old value :(. It's like the getter of the datatable fireup first before ajax update to the database.
what iam i doing wrong ? thank you for your help solving this .
Currently you're editing values within the object. It looks like you still need to make a call back to your database to update the value there.
It seems that whenever you need your dataTable you are getting it from your database and that's why event.getObject() always returns the old value.So in the getter of your datatable you need to add:
if (allContacts== null){
allContacts= (List<Contacts>) yourservice.getAll(); /*this refers to the function that get the list from the database*/
}
return allContacts;
I hope that may help you.
Most probably the problem is with your backing bean. if you have used #Named annotation instead of #ManagedBean (javax.faces.bean.ManagedBean) for your backing bean, you faces this kind of problems. Simply replace
#Named (value="YourBeanName")
with
#ManagedBean (name="YourBeanName")