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
Related
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>
I have a p:dataTable and the selected value is throwing null pointer when Im tring to get it,this situation is after put the datatable inside a modal p:dialog, but if remove the modal atribute works fine.
PD:the modal p:dialog was behid the overlay like this question
Primefaces - AjaxStatus - Dialog is behind the overlay
the answer is not working for me, because Im using primefaces 5.1, so I have to use appendTo="#(body)"
I don´t know if that is important for my problem.
Resume: the null pointer exist if the p:dialog is modal.
Here is my code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<ui:composition template="/resources/sysged.xhtml"
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"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<ui:define name="vDoc">
<h:form id="form">
<p:panel header="Document">
<h:panelGrid columns="4">
<p:commandButton id="prev"
actionListener="#{DocumentController.priviousPage()}"
icon="ui-icon-circle-triangle-w" update="docImage next prev"
disabled="#{DocumentController.inicioLista}" />
<p:commandButton id="next"
actionListener="#{DocumentController.nextPage()}"
icon="ui-icon-circle-triangle-e" update="docImage prev next"
disabled="#{DocumentController.finalLista}" />
<p:commandButton id="anotacoes" value="Anotaçoes"
onclick="PF('dialogAnotacao').show();" />
<p:button id="voltar" outcome="pesquisaDocumento.xhtml"
value="Voltar" />
</h:panelGrid>
</p:panel>
</h:form>
<h:form id="panotation">
<p:dialog id="dialogAnotacao" closeOnEscape="true" header="Anotaçoes"
widgetVar="dialogAnotacao" modal="true" resizable="false"
appendTo="#(body)" draggable="true">
<p:dataTable id="tanotation" var="anotation"
value="#{DocumentController.arquivo.anotacaoList}"
selectionMode="single"
selection="#{DocumentController.selected}"
rowKey="#{anotation.i}">
<p:column headerText="Indice" style="text-align:left">
<h:outputText value="#{anotation.i}" />
</p:column>
<p:column headerText="text" style="text-align:left">
<h:outputText value="#{anotation.text}" />
</p:column>
</p:dataTable>
<p:contextMenu for="tanotation">
<p:menuitem value="do" update="tanotation"
icon="ui-icon-close" actionListener="#{DocumentController.doit}">
</p:menuitem>
</p:contextMenu>
</p:dialog>
</h:form>
</ui:define>
</ui:composition>
My method in the managedBean
public void doit() {
System.out.println(selected);
}
You append your <p:dialog> to the body of the html page(see appendTo attribute), as a result it is not included in any <h:form>.
This could be a problem for your <p:dataTable>
Could you place your <h:form id="panotation"> inside of your <p:dialog> and not outside ?
I have a fileUploader which disappears after partial site refresh
Here is my xhtml file
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
template="/WEB-INF/templates/traleerdf-template.xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns="http://www.w3.org/1999/xhtml">
<ui:define name="content">
<f:metadata>
<f:event type="preRenderView"
listener="#{registration.loadRegistrationDetails()}" ></f:event>
</f:metadata>
<p:ajaxStatus onstart="PF('statusDialog').show();" onsuccess="PF('statusDialog').hide();"/>
<p:dialog modal="true" widgetVar="statusDialog" header="Saving"
draggable="false" closable="false">
<p:graphicImage value="/images/ajax-loader.gif"/>
</p:dialog>
<h:form id="form" enctype="multipart/form-data">
<p:panelGrid id="detail" columns="1" >
<p:dataTable var="reg" id="datatable" value="#{registration.registrationDTOs}" rows="12">
<p:column headerText="Name" style="width:5%">
<p:outputLabel value="#{reg.sourceName}"/>
</p:column>
<p:column headerText="Path Prefix" style="width:5%">
<p:outputLabel value="#{reg.pathPrefix}"/>
</p:column>
<p:column headerText="Template File" style="width:30%">
<p:commandButton id="templateButton" value="Get Template" oncomplete="tempDlg.show();" process="#this" title="Template File"
update=":topForm:form:growl :topForm:form:tempId">
<f:setPropertyActionListener value="#{reg}" target="#{registration.registrationDTO}" />
</p:commandButton>
</p:column>
<p:column style="width:2%" headerText="Update">
<p:commandButton id="selectButton" update=":topForm:form:growl :topForm:form:display" process="#this" oncomplete="regDialog.show()" icon="ui-icon-search" title="Edit">
<f:setPropertyActionListener value="#{reg}" target="#{registration.registrationDTO}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:dialog header="Registration Detail" widgetVar="regDialog" resizable="false" id="regDlg" showEffect="fade" hideEffect="explode" modal="true">
<p:panelGrid id="display" columns="2" style="margin:0 auto;" >
<p:outputLabel id="lblEndpoint" for="txtEndpoint" value="#{msg['Registration.Endpoint']}"/>
<h:outputText id="txtEndpoint" value="#{registration.registrationDTO.endpoint}"/>
<p:outputLabel id="lblSourceName" for="txtSourceName" value="#{msg['Registration.sourceName']}"/>
<p:inputText required="true" id="txtSourceName" value="#{registration.registrationDTO.sourceName}" requiredMessage="Source name not entered"/>
<p:outputLabel id="lblPathPrefix" for="txtPathPrefix" value="#{msg['Registration.pathPrefix']}"/>
<p:inputText disabled="true" required="true" id="txtPathPrefix" size="20" value="#{registration.registrationDTO.pathPrefix}" requiredMessage="Path prefix is required"/>
<p:outputLabel id="lblTemplateFile" for="txtTemplateFile" value="#{msg['Registration.templateFile']}"/>
<p:fileUpload required="true" id="txtTemplateFile" fileUploadListener="#{registration.uploadTemplateFile}" requiredMessage="Template File required"
mode="advanced" widgetVar="txtTemplateFile" value="#{registration.registrationDTO.templateFile}" update=":topForm:form:growl">
</p:fileUpload>
<h:panelGroup>
<p:commandButton icon="ui-icon-disk" id="btnUpdte" update=":topForm:form:growl :topForm:form:panel" ajax="true" action="#{registration.updateRegistration()}" style="margin-right:20px;"
value="Update" >
</p:commandButton>
</h:panelGroup>
</p:panelGrid>
</p:dialog>
<p:dialog header="Template Dialog" widgetVar="tempDlg" modal="true" height="100" showEffect="fade" hideEffect="explode">
<p:panelGrid id="tempId" style="margin:0 auto;" columns="2">
<p:outputLabel id="TemplateFileLbl" for="TemplateFile" value="#{msg['Registration.templateFile']}"/>
<h:outputText value="#{registration.registrationDTO.templateFile}" id="TemplateFile"/>
</p:panelGrid>
</p:dialog>
</p:panelGrid>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
The upload button will open a new dialog which allows the user to edit the fields and can upload a new template file.
My Problem is every time the upload button in the dialog is clicked, f:event method method is invoked which is expected as it is of type prerender but is there anyway to avoid this event call for the fileupload because it is overwriting the template file name I uploaded. (prerender method is making a call to db to get the list of details which in the case overriding the template file.)
From the namespaces you're using, I presume you're using JSF 2.2. In this version, you can have
<f:viewAction action="#{registration.loadRegistrationDetails()}"/>
The viewAction tag is not executed on postback by default.
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
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...