I am trying to disable the combobox when it processes the ajax event, but it sends null to the bean setter instead of the selected value. It sends the correct value once I remove the code onstart="PF('testA').disable();".
Does anyone have a solution for this. Thanks.
I am using Primefaces 6.2, JSF2.2, Java 7 and Glassfish 4.1.
<?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:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>
<h:body>
<h:form id="themeForm">
<p:selectOneMenu value="#{selectOneMenuViewA.theme}" widgetVar="testA">
<p:ajax process="#form" event="itemSelect" update=":themeForm:themeId" onstart="PF('testA').disable();" oncomplete="PF('testA').enable()"/>
<f:selectItems value="#{selectOneMenuViewA.themes}" var="theme" itemLabel="#{theme}" itemValue="#{theme}" />
</p:selectOneMenu>
<h:outputText id="themeId" value="#{selectOneMenuViewA.theme}"/>
</h:form>
</h:body>
public class SelectOneMenuViewA {
private String theme;
private List<String> themes;
#PostConstruct
public void init() {
themes = Arrays.asList("a", "b", "c");
}
public String getTheme() {
return theme;
}
public void setTheme(String theme) {
this.theme = theme;
}
public List<String> getThemes() {
return themes;
}
}
I'd like to integrate pe:ckeditor to my XHTML page.
After googling, I found this helpful link
www.primefaces.org/showcase-ext/sections/ckEditor/multipleEditors.jsf
The Bean class is:
package com.esprit.util;
import java.io.Serializable;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;
#ManagedBean
#ViewScoped
public class EditorController implements Serializable {
private static final long serialVersionUID = 20111020L;
private String content;
private String secondContent;
private String color = "#33fc14";
public EditorController() {
content = "Hi Showcase User";
secondContent = "This is a second editor";
}
public void saveListener() {
content = content.replaceAll("\\r|\\n", "");
final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Content",
content.length() > 150 ? content.substring(0, 100) : content);
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void secondSaveListener() {
secondContent = secondContent.replaceAll("\\r|\\n", "");
final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Second Content",
secondContent.length() > 150 ? secondContent.substring(0, 100) : secondContent);
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void changeColor() {
if (color.equals("#1433FC")) {
color = "#33fc14";
} else {
color = "#1433FC";
}
}
// Getters & Setters
}
The page XHTML is:
<!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"
xmlns:pe="http://primefaces.org/ui/extensions">
<body>
<h:form>
<p:growl id="growl" showDetail="true" />
<pe:ckEditor id="editor"
value="#{editorController.content}"
toolbar="[['Cut','Copy','Paste','PasteText','PasteFromWord','-', 'SpellChecker', 'Scayt']]">
<p:ajax event="save" listener="#{editorController.saveListener()}" update="growl"/>
</pe:ckEditor>
<br/>
<br/>
<pe:ckEditor id="secondEditor"
value="#{editorController.secondContent}"
toolbar="[['Cut','Copy','Paste','PasteText','PasteFromWord','-', 'SpellChecker', 'Scayt']]">
<p:ajax event="save" listener="#{editorController.secondSaveListener()}" update="growl"/>
</pe:ckEditor>
</h:form>
</body>
</html>
The added this to file web.xml:
<context-param>
<param-name>
org.primefaces.extensions.DELIVER_UNCOMPRESSED_RESOURCES
</param-name>
<param-value>false</param-value>
</context-param>
After running my project: I got this screenshot.
As you see, I didn't have the same editor as displayed by the tutorial: I have an Editor without Header.
Have you please any idea about solving this. Any proposition is appreciated. Thanks a lot.
Additional to the attribute toolbar that #ArgaPK mentioned, you have to:
Verify that those required jars exist:
commons-io-2.4.jar
commons-lang3-3.5.jar
gson-2.2.4.jar
primefaces-6.0.jar
primefaces-extensions-6.0.0.jar
resources-ckeditor-6.0.0.jar
Update your XHTML by adding <h:head/>
<!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"
xmlns:pe="http://primefaces.org/ui/extensions">
<h:head/>
<h:body>
<h:form style="width: 800px; margin: 0 auto;">
<p:growl id="growl" showDetail="true" />
<pe:ckEditor id="editor" value="#{editorController.content}" toolbar="[['Cut','Copy','Paste','PasteText','PasteFromWord','-', 'SpellChecker', 'Scayt']]">
<p:ajax event="save" listener="#{editorController.saveListener}" update="growl"/>
</pe:ckEditor>
<br/>
<br/>
<pe:ckEditor id="secondEditor" value="#{editorController.secondContent}" toolbar="[['Cut','Copy','Paste','PasteText','PasteFromWord','-', 'SpellChecker', 'Scayt']]">
<p:ajax event="save" listener="#{editorController.secondSaveListener}" update="growl"/>
</pe:ckEditor>
</h:form>
</h:body>
</html>
HTH
You have to add the toolbar attribute
<p:growl id="growl" showDetail="true" />
<pe:ckEditor id="editor" value="#{editorController.content}" toolbar="[['Cut','Copy','Paste','PasteText','PasteFromWord','-', 'SpellChecker', 'Scayt']]">
<p:ajax event="save" listener="#{editorController.saveListener}" update="growl"/>
</pe:ckEditor
<br/>
<br/>
<pe:ckEditor id="secondEditor" value="#{editorController.secondContent}" toolbar="[['Cut','Copy','Paste','PasteText','PasteFromWord','-', 'SpellChecker', 'Scayt']]">
<p:ajax event="save" listener="#{editorController.secondSaveListener}" update="growl"/>
</pe:ckEditor>
and add the following dependency also:
<dependency>
<groupId>org.primefaces.extensions</groupId>
<artifactId>primefaces-extensions</artifactId>
<version>6.0.0</version>
</dependency>
<dependency>
<groupId>org.primefaces.extensions</groupId>
<artifactId>resources-ckeditor</artifactId>
<version>6.0.0</version>
</dependency>
see this helfull link
Getting started with primefaces extensions
I have two pages of jsf. dashboard.xhtml has a <p:poll /> tag that updates "form1" every second, while input.xhtml is just a basic crud page that updates display in dashboard.xhtml. I'm wondering because when the dashboard.xhtml is open on a different tab or a second window of browser, input.xhtml keeps losing its state and causes the view to expire ViewExpiredException. When I tried to put <o:enableRestorableView /> in template_2.xhtml, the ViewExpiredException is gone but my input values is resetting when I submit the form. The resetting is not occuring when dashboard.xhtml is not open. When it's open, the input resets randomly.
What I want to accomplish is when I input some data in the input.xhtml, I want it to display in dashboard.xhtml in realtime. Anybody knows how to do this without (ViewExpiredException)? The application runs in WebSphere 8.5(MyFaces 2.0), Primefaces 6.0, OmniFaces 1.8.3
dashboard.xhtml:
<ui:composition template="/WEB-INF/template_1.xhtml"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:o="http://omnifaces.org/ui">
<ui:define name="content">
<h:form id="form1">
<p:poll interval="1" listener="#{dashboardBacking.updateValues}" update="form1"
global="false" />
<!-- dashboard content -->
</h:form>
</ui:define>
</ui:composition>
input.xhtml:
<ui:composition template="/WEB-INF/template_2.xhtml"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:o="http://omnifaces.org/ui">
<ui:define name="content">
<h:form id="form2">
<p:panelGrid>
<p:row>
<p:column>
<p:inputText value="#{inputBacking.values.description}" />
</p:column>
</p:row>
<p:row>
<p:column>
<p:commandButton id="#{inputBacking.save}" update="form2"/>
</p:column>
</p:row>
</p:panelGrid>
</h:form>
</ui:define>
</ui:composition>
Backing bean (dashboard.xhtml):
#ManagedBean
#ViewScoped
public class DashboardBacking {
#EJB
private Dashboard dashboard;
private DashboardValues values;
#PostConstruct
public void postConstruct(){
values = new DashboardValues();
updateValues();
}
public void updateValues(){
DashboardValues newValues = dashboard.getValue();
if(!newValues.exactlyEqual(values)){
values = newValues;
}
}
public DashboardValues getValues(){
return values;
}
}
Backing bean (input.xhtml):
#ManagedBean
#ViewScoped
public class InputBacking {
#EJB
private DashboardDao dao;
private DashboardValues values;
public void save(){
dao.save(values)
}
//Getters and Setters
}
Dashboard singleton class:
#Singleton
#Startup
public class Dashboard {
#EJB
private DashboardDao dao;
private DashboardValue value;
#Schedule(second="*/5") //update dashboard value every 5 seconds
private void updater(){
value = dao.getLatest();
}
public DashvoardValue getValue(){
return value;
}
}
template_1.xhtml:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:c="http://java.sun.com/jsp/jstl/core"
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" xmlns:o="http://omnifaces.org/ui"
xmlns:of="http://omnifaces.org/functions">
<f:view contentType="text/html">
<f:metadata>
<o:enableRestorableView />
</f:metadata>
<h:head>
</h:head>
<h:body>
<ui:insert name="content"/>
</h:body>
</f:view>
</html>
template_2.xhtml:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:c="http://java.sun.com/jsp/jstl/core"
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" xmlns:o="http://omnifaces.org/ui"
xmlns:of="http://omnifaces.org/functions">
<f:view contentType="text/html">
<h:head>
</h:head>
<h:body>
<ui:insert name="content"/>
</h:body>
</f:view>
</html>
This is my xhtml with the main tabview is set dynamic="true" and cache="false"
<?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:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</h:head>
<h:body>
<h:form id="form">
<p:commandButton id="save" value="save"
action="#{nestedTabviewTestBean.savePersonValues}" process="#form"
update="#form" />
<p:tabView activeIndex="#{nestedTabviewTestBean.activeIndex}" dynamic="true" cache="false"
value="#{nestedTabviewTestBean.tabsList}" var="tab">
<p:ajax event="tabChange" listener="#{nestedTabviewTestBean.tabChangeListener}" update="#form"></p:ajax>
<p:tab title="#{tab.title}">
<p:tabView activeIndex="0">
<p:tab title="testingNestedTabs">
<p:selectOneMenu id="selectOneMenu" value="#{nestedTabviewTestBean.activePerson.title}">
<f:selectItem itemLabel="Mr" itemValue="mr" ></f:selectItem>
<f:selectItem itemLabel="Misses" itemValue="misses" ></f:selectItem>
<f:selectItem itemLabel="Miss" itemValue="miss" ></f:selectItem>
</p:selectOneMenu>
<p:inputText id="name" value="#{nestedTabviewTestBean.activePerson.name}"></p:inputText>
<p:selectBooleanCheckbox id="majorOrMinor"
value="#{nestedTabviewTestBean.activePerson.isMajor}"></p:selectBooleanCheckbox>
</p:tab>
</p:tabView>
</p:tab>
</p:tabView>
</h:form>
</h:body>
</html>
This is my view scoped bean
public class NestedTabviewTestBean {
private List<Tab> tabsList = new ArrayList<>();
private Integer activeIndex = 0;
private List<Person> personsList = new ArrayList<>();
private Person activePerson;
#PostConstruct
public void load() {
Tab tab1 = new Tab();
tab1.setId("tab1");
tab1.setTitle("tab1");
tabsList.add(tab1);
Tab tab2 = new Tab();
tab2.setId("tab2");
tab2.setTitle("tab2");
tabsList.add(tab2);
personsList.add(new Person("mr", "Srikanth", true));
personsList.add(new Person("mr", "Madhu", false));
activePerson = personsList.get(activeIndex);
}
public void tabChangeListener(TabChangeEvent event) {
System.out.println("save start");
activePerson = personsList.get(activeIndex);
System.out.println("title :"+activePerson.getTitle()+": Name:"+activePerson.getName()+" :major :"+activePerson.getIsMajor());
System.out.println("save End");
}
public void savePersonValues() {
System.out.println("save start");
System.out.println("title :"+activePerson.getTitle()+": Name:"+activePerson.getName()+" :major :"+activePerson.getIsMajor());
System.out.println("save End");
}
}
On page load first tab content is loaded by default. Now if I click on save button the drop down values is being set to null and the checkbox value is being set to false always.
If I navigate to the last tab in main tabview and click on save button the values are properly binded.
This is kind of strange issue which I couldn't figure out.
I am using primefaces 4.0 and mojarra jsf 2.2.4
Primefaces tabview is currently a little bit broken (I'm using version 5.1). Try to avoid it or satisfy with dirty workarounds like this one:
Primefaces TabView does not maintain selectOneMenu Values
I have a primefaces (version 3.4.2) slider and an inputText for output value of the slider value.
The problem is that a change of the slider update the displayed value of the inputText, but the setter bind to the inputText is not called.
Here is my slider:
<html 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"
xmlns:a4j="http://richfaces.org/a4j">
<h:head>
<title>Zinsrechner</title>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="1" style="margin-bottom:10px">
<p:inputText id="x" value="#{zinsrechner.monatlicherBeitrag}" />
<p:slider minValue="0" maxValue="150" for="x" />
</h:panelGrid>
</h:form>
</h:body>
</html>
And this is my Setter, which is NOT called:
public void setMonatlicherBeitrag( Double beitrag ) {
monatlicherBeitrag = beitrag;
}
The Getter IS called:
public Double getMonatlicherBeitrag() {
return GuiParameter.getSpareinlageProMonat();
}
Adding a <p:ajax> inside your Slider will to the trick.
Example:
<p:slider minValue="0" maxValue="150" for="x">
<p:ajax event="slideEnd" process="x" />
</p:slider>
I was facing the same problem, but in my case the thing was that I was setting the <p:inputNumber .../> label as read only. I removed that attribute and everything worked.