PrimeFaces not fully rendering my components - primefaces

PrimeFaces is not rendering. I have configured everything correctly (hope so).
<!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: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:mp="http://primefaces.org/ui/material">
<head>
<title>Welcome Page</title>
</head>
<body>
<h:head>
<h:form>
<h:panelGrid columns="4" cellpadding="5">
<h:outputLabel for="name" value="Name:" style="font-weight:bold" />
<p:inputText id="name" value="#{basicView.text}" />
<p:commandButton value="Submit" update="display"
icon="ui-icon-check" />
<h:outputText id="display" value="#{basicView.text}" />
</h:panelGrid>
</h:form>
</h:head>
</body>
</ui:composition>
public class BasicView {
private String text;
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
}
I have included all the annotations and lib.
Here is the Index.xhtml output


You messed up the head and body tags. Also you need to put your form in the body.
<!DOCTYPE html>
<h: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:mp="http://primefaces.org/ui/material">
<h:head>
<title>Welcome Page</title>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="4" cellpadding="5">
<h:outputLabel for="name" value="Name:" style="font-weight:bold" />
<p:inputText id="name" value="#{basicView.text}" />
<p:commandButton value="Submit" update="display"
icon="ui-icon-check" />
<h:outputText id="display" value="#{basicView.text}" />
</h:panelGrid>
</h:form>
</h:body>
</h:html>

Related

Why polling method listener does not work if called in ui:composition template in PrimeFaces?

I am trying to do polling in PrimeFaces. Why polling listner does not get call when it called under <ui:composition template="/pages/layout.xhtml"> and it works when it call directly.
Here is the example
I tried polling with <ui:composition template="/pages/layout.xhtml"> and without it. Without <ui:composition template="/pages/layout.xhtml"> polling workiing but with <ui:composition template="/pages/layout.xhtml"> polling not working.
layout.xhtml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html" locale="en" encoding="UTF-8">
<h:head>
<title><ui:insert name="pageTitle">SampleApp</ui:insert></title>
<f:facet name="first">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
</f:facet>
<link
href="${facesContext.externalContext.requestContextPath}/resources/css/styles.css"
rel="stylesheet" type="text/css" />
<link
href="${facesContext.externalContext.requestContextPath}/resources/css/ReportStyle.css"
rel="stylesheet" type="text/css" />
</h:head>
<h:body>
<h:form id="form" prependId="false" enctype="multipart/form-data">
<p:layout id="layout" fullPage="true">
<p:layoutUnit position="north" size="50" resizable="false"
closable="false" collapsible="false"
style="overflow-x:hidden;overflow-y:hidden">
<table>
<tr valign="top">
<td width='100%'><h:outputText
style="font-weight: bold;font-size: 12px;" immediate="true "
value="SampleApp" /></td>
<td><h:outputLink style="font-weight: bold;"
immediate="true"
value="${facesContext.externalContext.requestContextPath}/pages/about.xhtml">About</h:outputLink>
<h:outputLink style="font-weight: bold;padding-left:10px"
immediate="true"
value="${facesContext.externalContext.requestContextPath}/pages/contactus.xhtml">Contact</h:outputLink>
</td>
</tr>
<tr>
<td><h:outputText style="font-weight: bold;font-size: 10px;"
immediate="true " value="Welcome, #{loginBean.emailid} " /></td>
</tr>
</table>
</p:layoutUnit>
<p:layoutUnit position="west" resizable="false" closable="false" collapsible="false" size="200">
<p:menu style="width:95%">
<p:submenu label="Reports">
<p:menuitem value="Dashboard" onclick="selectComponentLink(this)" url="/pages/Report/Dashboard.xhtml" />
</p:submenu>
</p:menu>
</p:layoutUnit>
<p:layoutUnit position="center">
<p:growl id="growl" life="2000" />
<ui:insert name="centerContent" />
</p:layoutUnit>
</p:layout>
</h:form>
</h:body>
</f:view>
</html>
Dashboard.xhtml - Polling does not work
<?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">
<ui:composition template="/pages/layout.xhtml">
<ui:define name="pageTitle">
<h:outputText value="Suites" />
</ui:define>
<ui:define name="centerContent">
<div class="bodycopy parbase">
<div style="clear: both"></div>
<div class="content-body">
<h:form id="test">
<h:panelGrid id="reportId1">
<h:outputText id="txt_count" value="#{executionBean.number}" />
<p:poll interval="3" listener="#{executionBean.increment}"
update="txt_count" />
</h:panelGrid>
</h:form>
</div>
<div style="clear: both"></div>
</div>
</ui:define>
</ui:composition>
</html>
Dashboard2.xhtml - Polling works fine
<?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">
<f:view contentType="text/html" locale="en" encoding="UTF-8">
<h:head>
<title><ui:insert name="pageTitle">SampleApp</ui:insert></title>
<f:facet name="first">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
</f:facet>
<link
href="${facesContext.externalContext.requestContextPath}/resources/css/styles.css"
rel="stylesheet" type="text/css" />
<link
href="${facesContext.externalContext.requestContextPath}/resources/css/ReportStyle.css"
rel="stylesheet" type="text/css" />
</h:head>
<h:body>
<h:form id="DashboardForm">
<h:outputText id="txt_count" value="#{executionBean.number}" />
<p:poll interval="3" listener="#{executionBean.increment}"
update="txt_count" />
</h:form>
</h:body>
</f:view>
</html>
ExecutionBean.java
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
#ManagedBean(name="executionBean")
#SessionScoped
public class ExecutionBean {
private int number;
public int getNumber() {
return number;
}
public void increment() {
System.out.println("number:" + number);
number++;
}
}
Actual Result: When I run polling in Dashboard2.xhtml it is working as not defind
And,
When I run polling in Dashboard.xhtml polling does not work as it is defind in

In your "does not work" example, your ui:composition defines a h:form which ends up inside of the <h:form id="form" prependId="false" enctype="multipart/form-data"> of layout.xhtml, whilst in your second example you have only one <h:form id="DashboardForm"> - nested forms are not allowed!

Disable/Enable inputText with selectBooleanCheckbox in Primefaces

Hey trying to disable/enable inputText based on a change event when a selectBooleanCheckbox is selected/unselected. Currently though, regardless of what whether or not the checkbox is selected, the inputText will always be disabled. Do I need to instead attach a listener to the checkbox? It seems in this case the inputText is never getting re-rendered.
HTML:
<div>
<p:outputLabel for="#next" value="Additional Time: " />
<p:selectBooleanCheckbox value="#{dialogView.additionalTime}" ajax="true" event="change" update="hour"/>
</div>
<div>
<p:outputLabel for="hour" value="Hour:" />
<p:inputText id="hour" value="#{dialogView.hour}" disabled="#{!dialogView.additionalTime}" label="Hour" />
</div>

Tested on PrimFaces 6.0,6.1 and 6.2
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<h:head>
<title>PrimeFaces Test</title>
</h:head>
<h:body>
<h:form>
<div>
<p:outputLabel for="#next" value="Additional Time: " />
<p:selectBooleanCheckbox value="#{dialogView.additionalTime}">
<p:ajax update="hour"></p:ajax>
</p:selectBooleanCheckbox>
</div>
<div>
<p:outputLabel for="hour" value="Hour:" />
<p:inputText id="hour" value="#{dialogView.hour}" disabled="#{!dialogView.additionalTime}" label="Hour" />
</div>
</h:form>
</h:body>
</html>

activate pt:data-tooltip on commandbutton

i'm using jsf 2.2 primefaces 6.0 and i'm trying to add "pt:data-tooltip" on my commandButton but it seems that this attribute is unknown.I need help to make it acceptable.
Here the xhtml code of all the xhtml page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<ui:composition template="/facelets/template.xhtml">
<ui:define name="content">
<ul class="breadcrumb">
<li><i class="ace-icon fa fa-home home-icon"></i> Acceuil</li>
<li class="active">espace Administrateur</li>
</ul>
<!-- /.breadcrumb -->
</ui:define>
<ui:define name="pageContent">
<h:form id="form">
<p:panel header="ajouter Acte Médical">
<p:messages />
<p:panelGrid id="pan" columns="3">
<p:outputLabel value="Type acte medical *:" />
<p:inputText value="#{acteBean.acteMedical.typeActe}" id="input1"
placeholder="Type de l'acte médical" required="true"
requiredMessage="indiquez une valeur">
<f:validator validatorId="av" />
<p:ajax event="blur" update="button" process="#form"/>
</p:inputText>
<p:message id="m1" for="input1" />
<p:outputLabel value="Plafond *:" />
<p:inputNumber id="i1" value="#{acteBean.acteMedical.plafond}"
symbol=" DT" symbolPosition="s" placeholder="Plafond total"
decimalSeparator="," thousandSeparator="."
disabled="#{not empty acteBean.acteMedical.pourcentage}">
<f:ajax event="keyup" render="i2" />
</p:inputNumber>
<p:message id="m2" for="i1" />
<p:outputLabel value="Pourcentage des frais de remboursement *:" />
<p:inputNumber id="i2" value="#{acteBean.acteMedical.pourcentage}"
placeholder="% des frais de remboursements" symbolPosition="s"
symbol="%" disabled="#{not empty acteBean.acteMedical.plafond}">
<f:ajax event="keyup" render="i1" />
</p:inputNumber>
<p:message id="m3" for="i2" />
<p:commandButton value="Sauvegarder" id="button" disabled="#{not facesContext.postback or facesContext.validationFailed}"
style="background:#6FDC6F;color: #FFFFFF"
styleClass="customStyleButton" action="#{acteBean.doAddActe()}"
update="#form:pan">
<p:confirm header="Confirmation" message="Êtes-vous sûr?"
icon="ui-icon-alert" />
</p:commandButton>
<p:commandButton value="Actualiser" action="#{acteBean.reset()}"
style="background:#FF0000; color: #FFFFFF"
styleClass="customStyleButton" update="#form:pan" />
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
<p:commandButton value="Oui" type="button"
styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="Non" type="button"
styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
</p:panelGrid>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
</html>

You forgot to add the 'pt' namespace declaration
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
And you are not using the jsf 2.2 namespace declarations for the jsf components either but the older ones

why update of <p:panel> works in IE but not in chrome

I am trying to include ".xhtml" in other; and it works perfectly in "Internet Explorer" but not in "Chrome"
My principale view which include two views one of them is menu.xhtml :
<ui:define name="content">
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-1" id="menuLeft">
<ui:include src="menu.xhtml" />
</div>
<div class="ui-grid-col-1" id="ber">
<p:panel id="principalePanel" >
<ui:include src="#{navigationBean.page}" />
</p:panel>
</div>
</div>
</div>
</ui:define>
menu.xhtml:; i am supposed to include other view in my My principale view using <b:navLink>
<b:panel id="basic" title="Modules" collapsible="false" look="primary">
<h:form id="formMenuLeft">
<p:accordionPanel id="panelMenuLeft">
<p:tab title="R H" id="tabMenuLeft">
<b:flyOutMenu id="ferd">
<b:navLink value="New Compte" id="navcreat"
update="#([id$=principalePanel])" onclick="ajax:navigationBean.setPage('viewcreat.xhtml')"/>
<b:navLink value="search" id="fedrt" update=":#{p:component('principalePanel')}"onclick="ajax:navigationBean.setPage('viewSearch.xhtml')"/>
</b:flyOutMenu>
</p:tab>
</p:accordionPanel>
</h:form>
</b:panel>

Actually, the example does work on Chrome, at least on OSX. I'll post my version - maybe there's a subtle difference lurking in the dark:
index.xhtml:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<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:b="http://bootsfaces.net/ui"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>BootsFaces: next-gen JSF Framework</title>
<meta name="author" content="Riccardo Massera"></meta>
</h:head>
<h:body style="padding-top: 60px">
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-5" id="menuLeft">
<ui:include src="menu.xhtml" />
</div>
<div class="ui-grid-col-5" id="ber">
<p:panel id="principalePanel" title="principale" >
<ui:include src="#{navigationBean.page}" />
</p:panel>
</div>
</div>
</div>
</h:body>
</html>
menu.xhtml:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<ui:fragment xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui "
xmlns:f="http://java.sun.com/jsf/core"
xmlns:b="http://bootsfaces.net/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<b:panel id="basic" title="Modules" collapsible="false" look="primary">
<h:form id="formMenuLeft">
<p:accordionPanel id="panelMenuLeft">
<p:tab title="R H" id="tabMenuLeft">
<b:flyOutMenu id="ferd">
<b:navLink value="New Compte" id="navcreat" update="#([id=principalePanel])"
onclick="ajax:navigationBean.setPage('start.xhtml')" />
<b:navLink value="search" id="fedrt" update=":#{p:component('principalePanel')}"
onclick="ajax:navigationBean.setPage('search.xhtml')" />
</b:flyOutMenu>
</p:tab>
</p:accordionPanel>
</h:form>
</b:panel>
</ui:fragment>
search.xhtml:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<ui:fragment xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui "
xmlns:f="http://java.sun.com/jsf/core"
xmlns:b="http://bootsfaces.net/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<b:panel title="Search" look="success">
</b:panel>
</ui:fragment>
start.xhtml:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<ui:fragment xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui "
xmlns:f="http://java.sun.com/jsf/core"
xmlns:b="http://bootsfaces.net/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<b:panel title="Create" look="primary">
</b:panel>
</ui:fragment>
NavigationBean.java:
package net.bootsfaces.demo.ajax;
import java.io.IOException;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
#ManagedBean
#SessionScoped
public class NavigationBean implements Serializable {
private static final long serialVersionUID = 1L;
private String page="start.xhtml";
public String getPage() {
return page;
}
public void setPage(String currentPage) {
this.page=currentPage;
}
}

PrimeFaces Gmap does not show

I want to use primefaces gmap, and my xhtml file is something like this:
<ui:fragment 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">
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" ></script>
<p:dataGrid id="list" var="l" value="#{bean.list}" columns="1" style="width:100%">
<h:form>
<f:view contentType="text/html">
<p:gmap center="41.381542,2.122893" zoom="15" type="HYBRID" style="width:100%;height:400px"/>
</f:view>
</h:form>
<p:fieldset collapsed="true" toggleable="true" toggleSpeed="500" legend="#{l.username}"
style="text-align:left">
<h:panelGrid columns="2" style="width:100%">
.
.
.
.
</h:panelGrid>
</p:fieldset>
</p:dataGrid>
but the map does not show, what is the problem? how can I solve it?

Instead of ui:fragment I use
<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:ui="http://java.sun.com/jsf/facelets">