p:growl not working - jsf

My growl doesn't work, I tried like eveyrthing I found so I'm asking here how to make my growl work. My xhtml is really simple registration and login enclosed with ui:include . I'm using PrimeFaces 6.0. It is definitely different from proposed answer since answers from that doesn't 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://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">
<f:view>
<h:body>
<h:form>
<p:growl id="growl" showDetail="true" sticky="true" />
<h:inputText id="Email" validatorMessage="Niepoprawny format maila" value="#{userMB.tmp.email}"
label = "Email"/>
<h:messages for="Email" style="color:red;margin:8px;" />
<br/>
<h:inputText id="firstName" validatorMessage="Pole nie moze byc puste"
value="#{userMB.tmp.firstName}">FirstName</h:inputText>
<h:messages for="firstName" style="color:red;margin:8px;" /><br/>
<h:inputText id="lastName" validatorMessage="Pole nie moze byc puste"
value="#{userMB.tmp.lastName}">LastName</h:inputText>
<h:messages for="lastName" style="color:red;margin:8px;" /><br/>
<h:inputSecret id="password" validatorMessage="Pole nie moze byc puste"
value="#{userMB.tmp.password}">Password</h:inputSecret>
<h:messages for="password" style="color:red;margin:8px;" /><br/>
<p:commandButton update="growl" actionListener="#{userMB.Register()}"
icon="ui-icon-check">Register</p:commandButton>
</h:form>
<h:panelGroup>
<ui:include src="login.xhtml" />
</h:panelGroup>
</h:body>
</f:view>
</html>
I'm using this to call my growl in userMB.Register()
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Success", "Login success"));
I'm just learning JSF so please be patient with me.

Related

my ÅÄÖ characters changes to different

When I push the "add player" button all my ÅÄÖ characters changes to different characters the first time but not after that. Feels like a have tried all things to get it work. It should add a player to an ArrayList. Any tip is welcome.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head><meta http-equiv='Content-Type' content='text/html' charset='UTF-8' />
<title>Add Player</title>
<h:outputStylesheet library="css" name="style.css" />
</h:head>
<h:body>
<center>
<h:form>
<h:panelGrid columns="2">
<h:outputLabel value="Id:"/>
<h:inputText name="id" value="#{id}" required="true"/>
<h:outputLabel value="Name:"/>
<h:inputText name="name" value="#{name}" required="true"/>
<h:outputLabel value="Age:"/>
<h:inputText value="#{age}" required="true"/>
<h:outputLabel value="Address:"/>
<h:inputText value="#{address}" required="true"/>
<h:outputLabel value="Email:"/>
<h:inputText value="#{email}" required="true"/>
<br />
<h:commandButton value="Add Player" type="Submit"
action="#{allPlayers.addPlayer(id,name,age,address,email)}"/>
</h:panelGrid>
</h:form>
<h:form><h:commandButton value="Show All players" action="listPlayer.xhtml" /></h:form>
</center>
</h:body>
</html>

notificationBar doesn't appear

I have the following XHTML page.
The main point is that i want to show a notification when the user click a button. But i don't know why, when i click the button, the notification doesn't appear at all.
<!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:c="http://java.sun.com/jsp/jstl/core"
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>
</h:head>
<f:metadata>
<f:viewParam name="partyname" value="#{personalPageBean.party.name}"/>
</f:metadata>
<h:body>
<p:notificationBar position="top" effect="slide" widgetVar="bar" styleClass="top">
<h:outputText value="What PrimeFaces has so far is just the beginning!" style="font-size:36px;" />
</p:notificationBar>
<ui:include src="../horizontal_menu.xhtml">
</ui:include>
<c:choose>
<c:when test="#{personalPageBean.memberOfParty}">
<p:panel id="panel" header="#{personalPageBean.party.name}" style="margin-bottom:10px;">
<h:panelGrid columns="2">
<h:outputLabel for="symbol" value="Symbol:" />
<h:graphicImage value="#{('../partysymbols/'.concat(personalPageBean.party.symbol))}" width="200" height="171" />
<h:outputLabel for="program" value="Program:" />
<h:outputLabel id="program" value="# {personalPageBean.party.program}" />
<h:link id="partyname" outcome="../memberlist" value="memberlist">
<f:param name="partyname" value="# {personalPageBean.party.name}" />
</h:link>
<p:commandButton value="Show" onclick="bar.show()" type="button" />
</h:panelGrid>
</p:panel>
</c:when>
<c:otherwise>
<h1>You aren't member of a party.</h1>
<h:link outcome="personalpage">my personal page</h:link>
</c:otherwise>
</c:choose>
</h:body>
</html>
So, sorry if i copied the whole page but i really have no idea on where is the error.
thanks to all of you in advance
Try this:
For bar:
<p:notificationBar position="top" effect="slide" styleClass="top" widgetVar="bar">
<h:outputText value="What PrimeFaces has so far is just the beginning!" style="font-size:36px;" />
</p:notificationBar>
And for button:
<p:commandButton value="Show" onclick="PF('bar').show()" type="button" />

No navigation happens when using a p:commandButton

Here is a Facelets file which is used to get first and last name and after that will go to the another Facelets file:
<?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><title>User Form</title></h:head>
<h:body>
<h:form>
<h:panelGrid columns="2">
<p:graphicImage value="resources/images/image.jpg" width="50%"/>
<p:panelGrid columns="2" width="50%">
<f:facet name="header">
User Form
</f:facet>
<h:outputLabel for="firstname" value="Firstname: *"/>
<p:inputText id="firstname" value="" label="Firstname"/>
<h:outputLabel for="surname" value="Surname: *"/>
<p:inputText id="surname" value="" required="true" label="Surname"/>
<f:facet name="footer">
<p:commandButton type="button" value="Save" icon="ui-icon-check" style="margin:0" action="construction"/>
</f:facet>
</p:panelGrid>
</h:panelGrid>
</h:form>
</h:body>
</html>
I expected to go to the construction.xhtml when I press the "Save" button, but nothing happens. How is this caused and how can I solve it?
when you are using commandButton you must do something like this:
<p:commandButton value="Save" icon="ui-icon-check" style="margin:0" action="#{someBean.navigate}"/>
it means that you must use managed bean
and in your case you must use button instead of commandButton

JSF - dynamic 'name' attribute in ui:insert

In the code below, after logging in, ui:include is OK (changing), outputText is OK (changing), and ui:insert is not changing.
template.xhtml:
<html xmlns="http://www.w3.org/1999/xhtml" (...) >
<h:head></h:head>
<h:body>
<p:panel header="LoginForm" >
<ui:insert name="#{userBean.loggedIn?'logoutForm':'loginForm'}" />
<ui:include src="#{userBean.loggedIn?'incA.xhtml':'incB.xhtml'}" />
<h:outputText value="#{userBean.loggedIn?'print logoutForm':'print loginForm'}" />
</p:panel>
</h:body>
</html>
index.xhtml:
<ui:composition template="template.xhtml"
xmlns="http://www.w3.org/1999/xhtml" (...) >
<ui:define name="loginForm">
<h:form >
<p:inputText id="usernameInput" value="#{credentialsBean.username}" />
<p:password id="passwordInput" value="#{credentialsBean.password}" />
<p:commandButton value="Log in" action="#{loginBean.actionLogin}" ajax="false" type="submit" />
</h:form>
</ui:define>
<ui:define name="logoutForm" >
<h:form >
<p:commandButton value="Logout" type="submit" action="#{loginBean.actionLogout}" ajax="false" />
</h:form>
</ui:define>
</ui:composition>
Is it normal behavior?
ui:insert's name property is evaluated in the build JSF tree phase. Use ui:include instead ui:insert to be happy.

<f:ajax event> not working with <ui:composition template="">

i have a weird problem and i can't know the main cause, i have these login page, which uses <f:ajax event=""> to validate username and password:
<!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">
<h:head></h:head>
<h:body>
<h:form>
<h:panelGrid columns="3">
Name:
<h:inputText id="name" value="#{validateBean.name}"
validator="#{validateBean.validateName}">
<f:ajax event="blur" render="nameError" />
</h:inputText>
<h:message for="name" id="nameError" style="color:red" />
Password:
<h:inputText id="password" value="#{validateBean.password}"
validator="#{validateBean.validatePassword}">
<f:ajax event="blur" render="passwordError" />
</h:inputText>
<h:message for="password" id="passwordError" style="color:red" />
<h:commandButton value="Login" action="# {validateBean.login}" />
</h:panelGrid>
these JSF works properly, but the problem appears when i place the same above components under a <ui:composition template=""> inorder to use these page with a template
<!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">
<ui:composition template="/WEB-INF/Templates/BasicTemplate.xhtml">
<ui:define name="content">
<center>
<h:form>
<h:panelGrid columns="3">
Name:
<h:inputText id="name" value="#{validateBean.name}"
validator="#{validateBean.validateName}">
<f:ajax event="blur" render="nameError" />
</h:inputText>
<h:message for="name" id="nameError" style="color:red" />
Password:
<h:inputText id="password" value="#{validateBean.password}"
validator="# {validateBean.validatePassword}">
<f:ajax event="blur" render="passwordError" />
</h:inputText>
<h:message for="password" id="passwordError" style="color:red" />
<h:commandButton value="Login" action="# {validateBean.login}" />
</h:panelGrid>
</h:form>
</center>
</ui:define>
</ui:composition>
</html>
for more clarity, here's the jsf template 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">
<head>
<title><ui:insert name="title">Default title</ui:insert></title>
</head>
<body>
<div id="header">
<ui:insert name="header">
<ui:include src="header.xhtml"/> // normal page contains plain text
</ui:insert>
</div>
<div id="content">
<ui:insert name="content">
Content area. See comments below this line in the source.
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer">
<ui:include src="footer.xhtml"/> // normal page contains plain text
</ui:insert>
</div>
</body>
</html>
when i tried the later approach the AJAX action doesn't fire at all, please any one explain to me why that happens??
You used <head> instead of <h:head> in your master template. This way JSF is unable to auto-include the required jsf.js JavaScript file for the ajax works.
Fix it accordingly:
<html ...>
<h:head>
...
</h:head>
<h:body>
...
</h:body>
</html>
See also:
commandButton/commandLink/ajax action/listener method not invoked or input value not updated - point 6

Resources