This question already has an answer here:
PrimeFaces CSS look'n'feel missing and JS "Uncaught Reference Error: PrimeFaces is not defined"
(1 answer)
Closed 6 years ago.
I am trying dialog framework to open a popup on click on a command button. The problem is that primefaces dialog is always visible. Please help, did I do something wrong.
It looks like ...
The problem is that the data is immediately displayed.
faces-config.xml:
<application>
<action-listener>org.primefaces.application.DialogActionListener</action-listener>
<navigation-handler>org.primefaces.application.DialogNavigationHandler</navigation-handler>
<view-handler>org.primefaces.application.DialogViewHandler</view-handler>
</application>
Here is my code.
<!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:p="http://primefaces.org/ui">
<body>
<h:form>
<h:panelGrid columns="1" cellpadding="5">
<p:commandButton value="Basic" type="button" onclick="PF('dlg1').show();" />
<p:commandButton value="Modal" type="button" onclick="PF('dlg2').show();" />
<p:commandButton value="Effects" type="button" onclick="PF('dlg3').show();" />
</h:panelGrid>
<p:dialog header="Basic Dialog" widgetVar="dlg1" minHeight="40">
<h:outputText value="Resistance to PrimeFaces is futile!" />
</p:dialog>
<p:dialog header="Modal Dialog" widgetVar="dlg2" modal="true" height="100">
<h:outputText value="This is a Modal Dialog." />
</p:dialog>
<p:dialog header="Effects" widgetVar="dlg3" showEffect="explode" hideEffect="bounce" height="100">
<h:outputText value="This dialog has nice effects." />
</p:dialog>
</h:form>
</body>
</html>
You can delete the faces-config.xml, it's only for the Dialog Framework http://www.primefaces.org/showcase/ui/df/basic.xhtml
Jaqen H'ghar is right, you need <h:head> and <h:body>. Here is a complete example.
<!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:p="http://primefaces.org/ui">
<h:head>
<title>Dialog Example</title>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="1" cellpadding="5">
<p:commandButton value="Basic" type="button"
onclick="PF('dlg1').show();" />
<p:commandButton value="Modal" type="button"
onclick="PF('dlg2').show();" />
<p:commandButton value="Effects" type="button"
onclick="PF('dlg3').show();" />
</h:panelGrid>
<p:dialog header="Basic Dialog" widgetVar="dlg1" minHeight="40">
<h:outputText value="Resistance to PrimeFaces is futile!" />
</p:dialog>
<p:dialog header="Modal Dialog" widgetVar="dlg2" modal="true"
height="100">
<h:outputText value="This is a Modal Dialog." />
</p:dialog>
<p:dialog header="Effects" widgetVar="dlg3" showEffect="explode"
hideEffect="bounce" height="100">
<h:outputText value="This dialog has nice effects." />
</p:dialog>
</h:form>
</h:body>
</html>
Related
I am aware that nesting is a problem with form tags. However, my page does not have nested forms. I have one form (id="menuForm") to enclose the p:menu. Next, I have a form (id="locationForm") lower in the page. I have checked the html source that is output, and there is no nesting happening.
I have one p:commandButton that I want to use to submit the form. It works occasionally, but not all of the time. Sometimes, the method fires and other times it doesn't. Can anyone poing out what I'm doing wrong?
Also--If I comment out the menu form completely it works as intended.
Thanks.
Action Method:
public String insertLocationAction(){
System.out.println("******* Method Fired.");
DatabaseManager.insertLocation(newLocation);
return "locations";
}
XHTML Page:
<?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:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<f:view>
<ui:debug rendered="#{facesContext.application.projectStage eq 'Development'}"/>
<h:head />
<p:messages />
<p:layout fullPage="true">
<p:layoutUnit position="west" size="260" header="Menu" resizable="false" closable="false">
<h:form id="menuForm">
<p:menu style="width: 240px;" >
<p:submenu label="Locations" style="width: 240px;">
<p:menuitem value="All Locations" outcome="/pages/locations.xhtml" style="width: 240px;" />
<p:menuitem value="Create New" action="#{locationBackingBean.addLocationAction}" style="width: 240px;" />
</p:submenu>
<p:submenu label="Queries" style="width: 240px;">
<p:menuitem value="Product Group Sales" outcome="/pages/productGroupSales.xhtml" style="width: 240px;" />
<p:menuitem value="Product Line Sales" outcome="/pages/productLineSales.xhtml" style="width: 240px;" />
</p:submenu>
</p:menu>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
<h:form id="locationform" enctype="multipart/form-data">
<p:growl id="growl" showDetail="true" />
<p:panelGrid columns="2">
<f:facet name="header">Enter New Location Details</f:facet>
<h:outputLabel for="locationName" value="Location Name:" /> <p:inputText id="locationName" value="#{locationBackingBean.newLocation.locationName}" size="100" />
<h:outputLabel for="street1" value="Street Address1:" /> <p:inputText id="street1" value="#{locationBackingBean.newLocation.street1}" size="100"/>
<h:outputLabel for="street2" value="Street Address2:" /><p:inputText id="street2" value="#{locationBackingBean.newLocation.street2}" size="100"/>
<h:outputLabel for="city" value="City:" /><p:inputText id="city" value="#{locationBackingBean.newLocation.city}" size="40" />
<h:outputLabel for="state" value="State:" /><p:inputText id="state" value="#{locationBackingBean.newLocation.state}" size="2" />
<h:outputLabel for="country" value="Country:" /><p:inputText id="country" value="#{locationBackingBean.newLocation.country}" size="20" />
<h:outputLabel for="phone" value="Phone:" /><p:inputText id="phone" value="#{locationBackingBean.newLocation.phone}" size="15" />
<h:outputLabel for="locationType" value="Type:" /><p:inputText id="locationType" value="#{locationBackingBean.newLocation.locationType}" />
</p:panelGrid>
<p:commandButton action="#{locationBackingBean.insertLocationAction}" ajax="false" value="Save" />
</h:form>
</p:layoutUnit>
</p:layout>
</f:view>
</html>
Refer to: http://www.primefaces.org/docs/vdl/4.0/primefaces-p/commandButton.html
By default the p:commandButton processes the whole 'view'.
Add process=":locationform" to the commandButton might just need "locationform" (depends on your selector working and nested jsf components etc..
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.
I am trying to use dialog element of primefaces but it is not working. so I have tried the same code provided in primefaces site. but that code is also not working.
<h:panelGrid columns="1" cellpadding="5">
<p:commandButton id="basic" value="Basic" onclick="PF('dlg1').show();" type="button" />
<p:commandButton id="modalDialogButton" value="Modal" onclick="PF('dlg2').show();" type="button"/>
<p:commandButton id="effectsDialogButton" value="Effects" onclick="PF('dlg3').show();" type="button" />
</h:panelGrid>
<p:dialog id="basicDialog" header="Basic Dialog" widgetVar="dlg1" appendToBody="false">
<h:outputText value="Resistance to PrimeFaces is futile!" />
</p:dialog>
<p:dialog id="modalDialog" header="Modal Dialog" widgetVar="dlg2" modal="true" height="100" appendToBody="false">
<h:outputText value="This is a Modal Dialog." />
</p:dialog>
<p:dialog header="Effects" widgetVar="dlg3" showEffect="explode" hideEffect="bounce" height="100" appendToBody="false">
<h:outputText value="This dialog has nice effects." />
</p:dialog>
This is the header of my 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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
Try opening your dialog like so:
<p:dialog id="modalDialog" header="Modal Dialog" widgetVar="dlg2" modal="true" height="100" appendToBody="false">
<h:outputText value="This is a Modal Dialog." />
</p:dialog>
<p:commandButton id="modalDialogButton" value="Modal" onclick="dlg2.show();" type="button" process="#this" update="#none"/>
Please post the header of your xhtml file and state what version of PrimeFaces you are using.
The following call:
PF('dlg2').show();
does not work with Primefaces v3.5 it works 4.0 and up. Version 4.0 supports
dlg2.show();
and
dlg2.hide();
but not for long, it will be deprecated in future versions so use PF('dlg2').show();
p:commandButton need to be inside h:form
I have this code, currently working:
<?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"
template="/templates/default.xhtml">
<ui:define name="content">
<h:form id="form">
<p:dataTable id="clienti" var="c" value="#{clientiController.clienti}" rowKey="#{c.id}">
<p:column headerText="Ragione sociale">
<h:outputText value="#{c.ragioneSociale}" />
</p:column>
<p:column headerText="Codice fiscale">
<h:outputText value="#{c.codiceFiscale}" />
</p:column>
<p:column style="width:4%">
<p:commandButton
update=":formDialog:clienteEditDialog"
oncomplete="clienteEditDialog.show()"
value="Modifica"
title="Modifica">
<f:setPropertyActionListener value="#{c}" target="#{clientiController.clienteSelezionato}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:commandButton
value="Aggiorna"
actionListener="#{clientiController.aggiorna}"
update=":form:clienti"
icon="ui-icon-arrowrefresh-1-n" />
<p:commandButton
value="Nuovo Cliente"
actionListener="#{clientiController.nuovo}"
update=":formDialog:clienteEditDialog"
oncomplete="clienteEditDialog.show()" />
</h:form>
<h:form id="formDialog">
<p:dialog
header="Modifica Cliente"
widgetVar="clienteEditDialog"
id="clienteEditDialog"
showEffect="fade"
hideEffect="explode"
closable="true">
<h:panelGrid id="clienteEditDialogTable" columns="2" cellpadding="10" style="margin:0 auto;">
<p:outputLabel for="fieldNome" value="Ragione Sociale:" />
<p:inputText id="fieldNome" value="#{clientiController.clienteSelezionato.ragioneSociale}" />
<p:outputLabel for="fieldCodice" value="Codice:" />
<p:inputText id="fieldCodice" value="#{clientiController.clienteSelezionato.codiceFiscale}" required="true" requiredMessage="Codice fiscale obbligatorio" />
</h:panelGrid>
<p:commandButton
value="Conferma modifiche"
actionListener="#{clientiController.modifica}"
update=":form:clienti"
oncomplete="clienteEditDialog.hide()"
rendered="#{clientiController.clienteSelezionato.id!=null}" />
<p:commandButton
value="Conferma nuovo cliente"
actionListener="#{clientiController.crea}"
update=":form:clienti"
oncomplete="clienteEditDialog.hide()"
rendered="#{clientiController.clienteSelezionato.id==null}" />
</p:dialog>
</h:form>
</ui:define>
</ui:composition>
Now I'd really like my dialog to be modal, so I add modal=true to my .
The result is my dialog appears "under" the overlay.
After a bit searching, I found that appendToBody=true would solve my problem, so I try it and my dialog appears the right way.
But... WTF??! Buttons inside the dialog stop working!!
BUG? Or is there any solution?
Move <h:form id="formDialog"> inside the dialog
Because when you use appendToBody=true the content of the dialog being appended to the BODY of your page... And in you case its being taken outside the h:form and as you know commandButtons must reside within a h:form in order to work....
Like this
<p:dialog appendToBody="true".....
<h:form id="formDialog">
.....
When working with dialogs allays remember to place your h:forms inside the dialog...
I have primeface p:panel on jsf file. I apply background color with the following style on the template page (anasayfa.xhtml).
<h:head>
<style type="text/css">
.bos{background-color:red;}
</style>
</h:head>
My Jsf Page with viewscoped backing bean:
<ui:composition template="/anasayfa.xhtml">
<ui:define name="ortaAlan">
...
<p:panel styleClass="bos">
...
</p:panel>
</ui:define>
</ui:composition>
When I load page background color is seen for very shortly, then becomes transparent. CTRL+F5 has the same effect.
What is wrong here?
Thanks for helps in advance
jsf 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:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition template="/anasayfa.xhtml">
<ui:define name="ortaAlan">
<p:panel id="rezerveleriniz">
<h:outputText value="#{rezervasyonBean.bugun.time}">
<f:convertDateTime pattern="dd/MM/yyyy" />
</h:outputText> : Rezervasyon Saatleri <br/>
<ui:repeat var="r" value="#{rezervasyonBean.kullaniciRezervasyonSaatleri}">
#{r.saatAraligi}<br/>
</ui:repeat>
</p:panel>
<h:form id="aaa">
<p:panel>
<p:panel style="float:left;">
<h:panelGrid columns="1">
<ui:repeat var="rs" value="#{rezervasyonBean.rezervasyonSaatleriListesi}">
**// !!!!!!!!!!!! Problem is here !!!!!!!!**
<p:panel styleClass="#{rezervasyonBean.isRezervasyonOnThisDay(rs) ? 'dolu' : 'bos' }">
#{rs.saatAraligi}
<h:commandButton action="#{rezervasyonBean.sec(rs,'1')}" value="+" update=":rezerveleriniz" disabled="#{rezervasyonBean.isRezervasyonOnThisDay(rs)}" />
</p:panel>
</ui:repeat>
</h:panelGrid>
<h:commandButton action="#{rezervasyonBean.kaydet()}" value="Kaydet" />
</p:panel>
<div style="clear:both;"></div>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
</html>
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:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>Görev Takip Sistemi</title>
<style type="text/css">
.ui-widget,.ui-widget .ui-widget {
font-size: 12px !important;
font-family:Arial;
}
.bos{
background-color:red;
}
.dolu{
background-color:yellow;
}
#topPanel {z-index:2 !important; }
#topPanel div{overflow:visible;}
.colStyle_panelGridForGorev{
width:225px;
}
.colStyle_panelGridForProfil{
width:100px;
}
</style>
</h:head>
<body>
<p:growl for="growlForAnasayfa" showDetail="true" life="3000" autoUpdate="true"/>
<h:form>
<p:idleMonitor timeout="900000">
<p:ajax event="idle" listener="#{anasayfaBean.indirectLogout}"/>
</p:idleMonitor>
</h:form>
<p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();" />
<p:dialog modal="true" widgetVar="statusDialog" header="Status"
draggable="false" closable="false">
<p:graphicImage value="/images/statusBar.gif" />
</p:dialog>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="50" id="topPanel" style="border:0px">
<h:form id="formAnaSayfaToolbar">
<p:toolbar>
<p:toolbarGroup align="left">
<p:commandButton type="submit" value="#{anasayfaBean.kullanici.kullaniciAdi} #{anasayfaBean.kullanici.kullaniciSoyadi}"
style="margin-left:200px;" action="/profil.xhtml?faces-redirect=true" ajax="false"/>
<p:commandButton type="submit" value="Gruplarım"
action="/kullanici/gruplarim.xhtml?faces-redirect=true" ajax="false" rendered="#{!anasayfaBean.daireBaskani}"/>
<p:commandButton type="submit" value="Görevlerim"
action="/gorevListele.xhtml?faces-redirect=true" ajax="false" rendered="#{!anasayfaBean.daireBaskani}"/>
<p:commandButton type="submit" value="Kullanıcı İşlemleri"
action="/daireBaskani/kullanici.xhtml?faces-redirect=true" ajax="false" rendered="#{anasayfaBean.daireBaskani}"/>
<p:commandButton type="submit" value="Grup İşlemleri"
action="/daireBaskani/grup.xhtml?faces-redirect=true" ajax="false" rendered="#{anasayfaBean.daireBaskani}"/>
<p:menuButton value="Görev İşlemleri" rendered="#{anasayfaBean.daireBaskani}">
<p:menuitem value="Yeni Görev Ekle" url="/daireBaskani/gorevEkle.btk" />
<p:menuitem value="Gorevleri Listele" url="/gorevListele.btk" />
</p:menuButton>
<p:menuButton value="Admin Paneli" rendered="#{anasayfaBean.admin}">
<p:menuitem value="Birim İşlemleri" url="/admin/birim.btk" />
<p:menuitem value="Ünvan İşlemleri" url="/admin/unvan.btk" />
</p:menuButton>
</p:toolbarGroup>
<p:toolbarGroup align="right">
<p:commandButton type="submit" value="Çıkış" icon="ui-icon-close"
action="#{anasayfaBean.logout}" ajax="false" style="margin-right:200px;"/>
</p:toolbarGroup>
</p:toolbar>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
<ui:insert name="ortaAlan">
<h:outputText value="Yukarıdaki menüden yapmak istediğiniz işlemi seçiniz." />
</ui:insert>
</p:layoutUnit>
<p:layoutUnit position="south" size="30" resizable="true" style="border-width:0px;">
<h:form style="text-align:center; font-size:13px;">
<h:outputText value="Bilişim Sistemleri Dairesi © 2012" />
</h:form>
</p:layoutUnit>
<p:layoutUnit position="east" size="200" id="eastPanel" style="border:0px">
</p:layoutUnit>
<p:layoutUnit position="west" size="200" id="westPanel" style="border:0px">
</p:layoutUnit>
</p:layout>
</body>
</html>