Show a modal dialog using primefaces commandLink in a growl - jsf

I want to put this command Link on my view message so it gets rendered on the growl, and I can open a dialog when clicking that link.
<p:commandLink onclick="PF('dlg_new_user').show()" value="Click Here" />
<p:growl id="msgs" showDetail="true" sticky="true" globalOnly="true" escape="false" />
My message:
context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Title" , message ));
I got it working using the solution below, but the content of the growl gets rendered with escaped html and it renders the link after some seconds.
String message = "User not found, Click Here to create new user";
For example:
WebPage
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Test my Growl Message</title>
<link type="text/css" rel="stylesheet"
href="#{facesContext.externalContext.requestContextPath}/resources/css/controlpanel.css " />
</h:head>
<h:body>
<h:form id="test" prependId="false">
<p:growl id="msgs" showDetail="true" sticky="true" globalOnly="true" escape="false" />
<p:outputLabel>
No user found!! <p:commandButton id="btn" value="Click Here" action="#{searchMB.searchSPU}" styleClass="botao_form" update=":test, :msgs, :dialog_user" /> to new User.
</p:outputLabel>
</h:form>
<p:dialog id="dialog_user" header="New User" widgetVar="dlg_new_user"
position="center" draggable="true" resizable="false"
closeOnEscape="true" appendTo="#(body)" modal="true">
<!-- Dialog content -->
</p:dialog>
</h:body>
</html>
MB:
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
#ManagedBean(name="searchMB")
#SessionScoped
public class TesteMB {
private static final String mainMessage = "Username not founded.";
private static final String link = "CLCK HERE to create a new user.";
public String searchSPU(){
FacesContext context = FacesContext.getCurrentInstance();
context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "No register founded" , mainMessage + "<br/>" + link ));
return null;
}
}

Problem solved, I was using two growls and one of them was generating the wrong html code.

Related

Why Faces Message did not show up on some pages even method is called?

I have multiple pages, and on some, the FacesMessage appears, while on others they don't. But I can't figure out why. In my example below, ajax is at false, but on some ajax is at true like everywhere else, but not working even it's same code
In every case the method is called, log proves it, but the message did not show in some case
I have a menu bar, which is included on top of every page, as
<html xmlns="http://www.w3.org/1999/xhtml" xlmns:h="http://java.sun.com/jsf/html" xlmns:f="http://java.sun.com/jsf/core" xlmns:ui="http://java.sun.com/jsf/facelets" xlmns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<title>LOG</title>
</f:facet>
<h:body>
<p:growl showDetail="true" sticky="true">
<p:autoUpdate disabled="false" />
</p:growl>
...
<p:layout>
<p:layoutUnit position="center">
<ui:insert name="center" />
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
And working page is like
<!DOCTYPE HTML PUBLIC>
<ui:composition template="/menu.xhtml" xmlns="http://www.w3.org/1999/xhtml"
xlmns:h="http://java.sun.com/jsf/html" xlmns:f="http://java.sun.com/jsf/core"
xlmns:ui="http://java.sun.com/jsf/facelets" xlmns:p="http://primefaces.org/ui">
<ui:define name="center>
<h:form >
<p:commandButton action="#{firstBean.method()}" />
</h:form>
</ui:define>
</ui:composition>
Not working page is like (here ajax at false, but there is also non-working page with ajax true) :
<!DOCTYPE HTML PUBLIC>
<ui:composition template="/menu.xhtml" xmlns="http://www.w3.org/1999/xhtml"
xlmns:h="http://java.sun.com/jsf/html" xlmns:f="http://java.sun.com/jsf/core"
xlmns:ui="http://java.sun.com/jsf/facelets" xlmns:p="http://primefaces.org/ui">
<ui:define name="center>
<h:form enctype="mulipart/form-data" >
<h:inputFile value="#{secondBean.inputFile}" />
<p:commandButton ajax="false" action="#{secondBean.method()}" process="#form" />
</h:form>
</ui:define>
</ui:composition>
And both method() are 100% same :
public void method(){
new JSFUtils().sendMessage("Test 1");
Logger.getAnonymousLogger().severe("Test"); // Always worked, always called
//...
}
Where I have an util class
public calss JSFUtil{
public void sendMessage(String msg){
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(Faces.Message.SEVERITY_WARN, "Warn", msg));
}
}

Primefaces file upload not working [duplicate]

This question already has an answer here:
Fileupload does not work in Primefaces
(1 answer)
Closed 5 years ago.
Trying to get jsf fileUploadListener to work just does not seem to do anything trying to just get a printline when hitting {fileUploadView.handleFileUpload} nothing seems to be happening.
UI loads up fine on localhost:8080/index.jsf after clicking on choose file I select a file then after pressing upload button nothing happens no errors in logs or print lines printing everything from display point of view seems to be fine.
index.xhtml
<!DOCTYPE html>
<html 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://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<link type="text/css" rel="stylesheet" href="/project/faces/javax.faces.resource/theme.css?ln=primefaces-glass-x" />
<f:view>
<h:head>
<meta charset="utf-8" />
<title>test</title>
</h:head>
<h:body>
<h:form>
<p:fileUpload fileUploadListener="#{fileUploadView.handleFileUpload}" mode="advanced" dragDropSupport="true"
update="messages" sizeLimit="100000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
<p:growl id="messages" showDetail="true" />
</h:form>
</h:body>
</f:view>
</html>
FileUploadView.java (bean)
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;
import org.primefaces.event.FileUploadEvent;
import org.primefaces.model.UploadedFile;
#ManagedBean
#ViewScoped
public class FileUploadView {
private UploadedFile uploadedFile;
public void handleFileUpload(FileUploadEvent event) {
System.out.println("handel file upoad =-=-=-=-=-");
FacesMessage message = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded.");
FacesContext.getCurrentInstance().addMessage(null, message);
}
public UploadedFile getUploadedFile() {
System.out.println("uploading file get =-=-=-=");
return uploadedFile;
}
public void setUploadedFile(UploadedFile uploadedFile) {
System.out.println("uploading file set =-=-=-=");
this.uploadedFile = uploadedFile;
}
}
add enctype in your form.
enctype="multipart/form-data" in your <h:form>
replace you <h:form> with <h:form enctype="multipart/form-data">
their are two problems i see in your code
the first one is you should use
<h:form enctype="multipart/form-data">
your code here
</h:form>
and add ajax=false attribute to commandButton
<h:form enctype="multipart/form-data">
<p:growl id="messages" showDetail="true" />
<p:fileUpload value="#{fileUploadView.file}" mode="simple" skinSimple="true"/>
<p:commandButton value="Submit" ajax="false" actionListener="#{fileUploadView.upload}" disabled="true" />
</h:form>
official doc https://www.primefaces.org/showcase/ui/file/upload/basic.xhtml
Unrelated Ijust notice something funny, the upload doesn't work on primefaces official showcase xP

growl is not displayed on the second mobile page

On a single xhtml, I have two pages (p:page). Each page has a form and in each form, there is a growl defined. When I am on the first page, the growl is displayed upon clicking the button. However, when I am on the second page, the growl is not displayed. Below is the reproducible sample code.
The reason, why I did not use the update="#form", is that there is another form in an overlay panel and via #(.errorHandlingPanel) selector, I should be able to easily trigger the growl without knowing which page currently I'm on.
<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:pm="http://primefaces.org/mobile"
xmlns:ui="http://java.sun.com/jsf/facelets">
<f:view renderKitId="PRIMEFACES_MOBILE"/>
<h:head>
</h:head>
<h:body>
<pm:page id="first">
<pm:header title="Page 1"></pm:header>
<pm:content>
<h:form id="form1">
<ui:include src="error_handling.jspx"/>
<p:commandButton id="btn1" value="Save" actionListener="#{growlViewDev.saveMessage}"
update="#(.errorHandlingPanel)"
icon="check"/>
</h:form>
</pm:content>
<pm:footer>
<p:tabMenu>
<p:menuitem value="Page 1"
outcome="pm:first?transition=slide"/>
<p:menuitem value="Page 2"
outcome="pm:second?transition=slide"/>
</p:tabMenu>
</pm:footer>
</pm:page>
<pm:page id="second">
<pm:header title="Page 2"></pm:header>
<pm:content>
<h:form id="form2">
<ui:include src="error_handling.jspx"/>
<p:commandButton id="btn2" value="Save" actionListener="#{growlViewDev.saveMessage2}"
update="#(.errorHandlingPanel)"
icon="check"/>
</h:form>
</pm:content>
<pm:footer>
<p:tabMenu>
<p:menuitem value="Page 1"
outcome="pm:first?transition=slide"/>
<p:menuitem value="Page 2"
outcome="pm:second?transition=slide"/>
</p:tabMenu>
</pm:footer>
</pm:page>
</h:body>
</html>
-- error_handling.jspx
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
>
<ui:composition>
<p:outputPanel styleClass="errorHandlingPanel">
<p:growl showDetail="true" showSummary="true" escape="false" sticky="true" globalOnly="true"/>
</p:outputPanel>
</ui:composition>
</html>
-- managed bean
#ManagedBean
public class GrowlViewDev {
public void saveMessage() {
FacesContext context = FacesContext.getCurrentInstance();
context.addMessage(null, new FacesMessage("Successful", "Your message: Button 1") );
context.addMessage(null, new FacesMessage("Second Message", "Additional Message Detail"));
}
public void saveMessage2() {
FacesContext context = FacesContext.getCurrentInstance();
context.addMessage(null, new FacesMessage("Successful", "Your message: Button 2") );
context.addMessage(null, new FacesMessage("Second Message", "Additional Message Detail"));
}
}
Tested with 5.1, 5.2 and 5.3
Thanks, ilhami visne
Somehow it seems the show method is not invoked after page navigation. The only workaround i found out is manually showing the message in ajax component oncomplete attribute using following method:
<p:growl id="growl" widgetVar="growlWidgetVar"/>
<p:commandButton outcome="pm:otherPage" update=":growl" oncomplete="showGrowl('growlWidgetVar');"/>
/*
* show current growl message again - PF-mobile bug on page navigation not showing it
*
* #param widgetVar PF widgetVar
*/
function showGrowl(widgetVar)
{
PF(widgetVar).show(PF(widgetVar).cfg.msgs);
}
The navigation often takes even place if a growl shall be shown. For this case call it in the pageshow handler instead:
$(document).on('pageshow', '#myPage', function(){
showGrowl('growlWidgetVar');
});

PrimeFaces Dialog not positioning right and some options make it stop working

I've already search trhough other posts for a solution to my problem with no luck, so im posting here. My problem is that primefaces dialog is not showing where it should, at the center of the page, at rare times it does(dont understand why), it works fine but its showing at the left top corner, and if i change the option "draggable" from false to true, the dialog stops working... i call the dialog from a managed bean.
this is the code:
form where i call it:
<h:form style="margin-top: 2%;">
<p:commandButton value="Create Ticket" icon="ui-icon-extlink" action="# {ticketBean.viewCreateCustomized}"/>
</h:form>
ManagedBean that contains the dialog method:
#ManagedBean
#ViewScoped
public class TicketBean implements Serializable {
public void viewTicketCustomized() {
Map<String,Object> options = new HashMap<String, Object>();
options.put("modal", true);
options.put("draggable", false);
options.put("resizable", false);
options.put("contentHeight", 320);
RequestContext.getCurrentInstance().openDialog("createticket", options, null);
}
UPDATE: this is the view that the dialog shows:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<h:outputScript name="jquery/jquery-plugins.js" library="primefaces"/>
<title>Create New Account</title>
<link href="#{request.contextPath}/css/simple.css" rel="stylesheet" type="text/css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
});
</script>
<style type="text/css">
.ui-widget {
font-size: 110%;
}
</style>
</h:head>
<f:view>
<center><h:form style="margin-top: 2%;">
<p:growl id="msg" showDetail="true"/>
<p:panelGrid columns="2">
<f:facet name="header">Create New Ticket</f:facet>
<h:outputText value="Description:" />
<p:inputTextarea value="#{ticketBean.description}"/>
<h:outputText value="Note:" />
<p:inputTextarea value="#{ticketBean.note}"/>
<f:facet name="footer"><p:commandButton value="Create Ticket" action="# {ticketBean.createTicket}" update="msg"/></f:facet>
</p:panelGrid>
</h:form></center>
</f:view>
</html>
I'm not sure what browser you are using or if your problem is related to the browser at all. But I tried your code and did not succeed to show the dialog. However, when I changed it to the following it worked:
<h:form style="margin-top: 2%;">
<p:commandButton value="Create Ticket" icon="ui-icon-extlink" onclick="test.show();"/>
<p:dialog modal="true" widgetVar="test" draggable="true" resizable="false" contentHeight="320">
</p:dialog>
</h:form>
I'm not sure if there is a reason you have to show the dialog from the managed bean, but if you do, then instead of "onclick.show()" you can do the following:
<h:form style="margin-top: 2%;">
<p:commandButton value="Create Ticket" icon="ui-icon-extlink" action="#{ticketBean.viewTicketCustomized()}"/>
<p:dialog modal="true" widgetVar="test" draggable="true" resizable="false" contentHeight="320">
</p:dialog>
</h:form>
and in your managed bean:
#ManagedBean
#ViewScoped
public class TicketBean implements Serializable {
public void viewTicketCustomized() {
RequestContext context = RequestContext.getCurrentInstance();
context.execute("test.show();");
}

Primefaces: global message not showing in dialog on first access

i am trying to show a globalMessage in the main form as well as within a dialog. The message within the dialog only shows when the dialog is opened a second time.
I can't get it to work. Can anyone solve this problem? I'd really appreciate it!
I am using JSF Mojarra 2.2.1, Primefaces 4.0 and Apache Tomcat 7.0.
Here is my view (testView.xhtml):
<?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: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">
<h:head></h:head>
<h:body>
<h:form id="testForm">
<p:messages globalOnly="true" showDetail="true" closable="true" />
<p:commandButton value="ClickMe" action="#{testBean.displayMessage()}"
update="testForm :testDialogForm" oncomplete="PF('testDialog').show()" />
</h:form>
<p:dialog id="testDialogId" widgetVar="testDialog"
dynamic="true" closable="true" closeOnEscape="true"
header="Dialog with message">
<h:form id="testDialogForm">
<p:messages globalOnly="true" showDetail="true" closable="true" />
<h:outputText value="This outputText should not be alone." />
</h:form>
</p:dialog>
</h:body>
Here is my bean (TestBean.java):
package de.simply.local.tbx.webbeans;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;
#ManagedBean(name = "testBean")
#ViewScoped
public class TestBean {
public void displayMessage() {
FacesContext.getCurrentInstance().addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_INFO,
"This is the summary.", "These are the details."));
}
}

Resources