My listener method is not fired when I close the dialog box using the close button. I don't understand why happens this...
XHTML page where dialog is located
<?xml version="1.0" encoding="ISO-8859-1"?>
<ui:composition 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:sec="http://www.springframework.org/security/tags"
template="/templates/template.xhtml">
<ui:define name="content">
<f:view>
<p:outputPanel id="opWindowsDlgViewUser">
<p:dialog id="dlgViewUser" widgetVar="wvDlgViewUser"
header="#{personaController.titleDlgViewUser}"
dynamic="true"
modal="true" closable="true" resizable="false">
<p:ajax event="close"
listener="#{sistemaController.onCloseDlgUsuario}"/>
<p:outputPanel id="opViewUser">
<ui:include src="/content.xhtml"></ui:include>
</p:outputPanel>
</p:dialog>
</p:outputPanel>
</f:view>
</ui:define>
</ui:composition >
Listener method
public void onCloseDlgUsuario(CloseEvent event){
System.out.println("onCloseDlgUsuario");
idRol = null;
this.fechaInicial = null;
this.fechaFinal = null;
}
[UPDATE]
Add XHTMl page content.xhtml
content.xhtml
<?xml version="1.0" encoding="ISO-8859-1" ?>
<ui:composition 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:sec="http://www.springframework.org/security/tags" >
<script type="text/javascript">
function unloadPage(){
if(#{sistemaController.renderAutoCompletePersonas}){
cleanText('acUsuario_input');
document.getElementById('acUsuario_input').focus();
}
}
</script>
<p:messages showDetail="true" closable="true"/>
<h:panelGrid columns="2">
<p:outputLabel value="Usuario " for="acUsuario"
rendered="#{sistemaController.renderAutoCompletePersonas}"/>
<p:autoComplete id="acUsuario" widgetVar="wvAcUsuario" minQueryLength="3"
completeMethod="#{sistemaController.completeListPersonasDisponibles}" var="p"
value="#{sistemaController.selectedPerson}"
rendered="#{sistemaController.renderAutoCompletePersonas}" scrollHeight="200"
itemLabel="#{p.apePaterno} #{p.apeMaterno} #{p.nombre} #{p.nombre2}"
itemValue="#{p}" converter="personaConverter" >
</p:autoComplete>
</h:panelGrid>
<h:panelGrid columns="2">
<p:outputLabel value="Rol" for="sltUserRol"/>
<p:selectOneMenu id="sltUserRol" value="#{sistemaController.idRol}" >
<p:ajax event="change" update="sltUserRol" />
<f:selectItem itemLabel="--Seleccione un Rol--" noSelectionOption="true" itemDisabled="true"/>
<f:selectItems value="#{sistemaController.listRolesActivos}" var="r"
itemLabel="#{r.valor}" itemValue="#{r.id}"/>
</p:selectOneMenu>
</h:panelGrid>
<h:panelGrid columns="3">
Acceso
<h:panelGroup>
<h:outputText value="Desde " />
<p:commandButton icon="ui-icon-refresh" title="Limpiar"
actionListener="#{sistemaController.cleanFechaInicial}" update="clnFechaInicial"/>
<p:calendar id="clnFechaInicial" value="#{sistemaController.fechaInicial}"
widgetVar="wvFechaInicial" pattern="dd/MM/yyyy" mode="inline" locale="es"/>
</h:panelGroup>
<h:panelGroup>
<h:outputText value=" Hasta "/>
<p:commandButton icon="ui-icon-refresh" title="Limpiar"
actionListener="#{sistemaController.cleanFechaFinal}" update="clnFechaFinal"/>
<p:calendar id="clnFechaFinal" value="#{sistemaController.fechaFinal}"
widgetVar="wvFechaFinal" pattern="dd/MM/yyyy" mode="inline" locale="es"/>
</h:panelGroup>
<p:commandButton id="btnGuardar" title="Guardar" icon="ui-icon-disk" value="Guardar"
rendered="#{sistemaController.renderAutoCompletePersonas}"
actionListener="#{sistemaController.addUserToSystem}"
oncomplete="unloadPage()"
update="opDlgUsuario, dtUsersSystem"/>
<p:commandButton id="btnActualizar" title="Actualizar" icon="ui-icon-disk" value="Actualizar"
rendered="#{not sistemaController.renderAutoCompletePersonas}"
actionListener="#{sistemaController.updateUserSystem}"
update="opDlgUsuario, dtUsersSystem"/>
</h:panelGrid>
</ui:composition>
Related
I wanted to use OneMenu inside a carousel to set a properties in managedBean, but its not working.
i test the OneMenu without Carousel and it work good , so i think that the problem is inside the carousel .
Any ideas as to what is going on here? plz help .
this is my xhtm page:
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
template="/template/template.xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:define name="pageContent">
<h:form id="form1">
<br />
<br />
<br />
<p:carousel value="#{homeBean.doInstances()}" headerText="Bootstrap VM " var="vm" itemStyle="text-align:center" responsive="true">
<p:panelGrid columns="2" columnClasses="label,value" layout="grid" style="margin: 0 auto;" styleClass="ui-panelgrid-blank">
<f:facet name="header"><p:graphicImage name="images/instance.jpg" /></f:facet>
<p:panelGrid columns="2" style="margin: 0 auto;">
<h:outputText value="name" />
<h:outputText value="#{vm.name}" />
<h:outputLabel value="ip" />
<h:outputLabel value="#{vm.url}" />
<p:outputLabel value="Configuration" />
<p:selectOneMenu id="recepie3" value="#{bootstrapBean.recipeSelected}">
<f:selectItem itemLabel="Select One Recipie " itemValue="" />
<f:selectItems value="#{bootstrapBean.selectItems}" />
</p:selectOneMenu>
<p:commandButton value="Bootstrap" ajax="false" validateClient="true" actionListener="#{bootstrapBean.bootstrapSelectedVm(vm.url)}" />
</p:panelGrid>
</p:panelGrid>
<f:facet name="footer" style="margin: 0 auto;">
<p:panelGrid columns="3" columnClasses="label,value" layout="grid" style="margin: 0 auto;" styleClass="ui-panelgrid-blank">
<h:outputLabel>Bootstrap All VMs :</h:outputLabel>
<p:selectOneMenu id="recepie2" value="#{bootstrapBean.recipeSelected}">
<f:selectItem itemLabel="Select One Recipie " itemValue="" />
<f:selectItems value="#{bootstrapBean.recipies}" />
</p:selectOneMenu>
<p:commandButton value="Bootstrap" ajax="false" validateClient="true" actionListener="#{bootstrapBean.bootstrapAllVMs()}" />
</p:panelGrid>
</f:facet>
</p:carousel>
</h:form>
</ui:define>
</ui:composition>
Tag library initialized incorrectly, please correct it and its work.
How to align this selectOneMenu?
I have the same problem in other pages.
Code:
<!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"
xmlns:namespace="http://java.sun.com/jsf/composite/namespace"
xmlns:sec="http://www.springframework.org/security/facelets/tags">
<!--
Replace path to template, title, header and body
with actual data.
-->
<ui:composition template="Template.xhtml">
<ui:define name="content">
<div class="content_wrapper">
<div class="content">
<sec:ifAnyGranted roles="ROLE_ADMINISTRADOR,ROLE_USUARIO,ROLE_GERENCIADOR">
<h:form id="formGrid">
Data Inicial: <p:calendar id="popup" value="#{relatorioHistoricoMB.dataInicial}" />
Data Final: <p:calendar id="popup2" value="#{relatorioHistoricoMB.dataFinal}" />
<p:selectOneMenu value="#{relatorioHistoricoMB.reservatorio.idReservatorio}"
style="width:170px" required="true"
requiredMessage="Selecione algum.">
<f:selectItem itemLabel="Selecione o Reservatório" itemValue="0" />
<f:selectItems value="#{relatorioHistoricoMB.listaReservatorio}"
var="reservatorio" itemLabel="#{reservatorio.nomeReservatorio}"
itemValue="#{reservatorio.idReservatorio}" />
</p:selectOneMenu>
<p:commandButton value="Gerar relatório" update="formGrid"
actionListener="#{relatorioHistoricoMB.executar}" />
<p:dataTable id="Grid" var="historico"
value="#{HistoricoBean.listaHistorico}"
selection="#{HistoricoBean.historico}" selectionMode="single"
rowKey="#{historico.idHistorico}" paginator="true" rows="5">
<f:facet name="header">
<h:outputText value="Historico" />
</f:facet>
<p:column headerText="Reservatorio">
<f:facet name="header">
<h:outputText value="Reservatorio" />
</f:facet>
<h:outputText value="#{historico.reservatorio.nomeReservatorio}" />
</p:column>
<p:column headerText="Bomba">
<f:facet name="header">
<h:outputText value="Bomba" />
</f:facet>
<h:outputText value="#{historico.bomba.nomeBomba}" />
</p:column>
<p:column headerText="Data">
<f:facet name="header">
<h:outputText value="Data" />
</f:facet>
<h:outputText value="#{historico.dataHistorico}" />
</p:column>
<p:column headerText="Evento">
<f:facet name="header">
<h:outputText value="Evento" />
</f:facet>
<h:outputText value="#{historico.novoStatusHistorico}" />
</p:column>
</p:dataTable>
</h:form>
</sec:ifAnyGranted>
</div>
</div>
</ui:define>
</ui:composition>
</html>
you can try place your elements into p:panelGrid
http://www.primefaces.org/showcase/ui/panel/panelGrid.xhtml
but primefaces datatable can use filter:
http://www.primefaces.org/showcase/ui/data/datatable/filter.xhtml
i have problem in row selection after applying default filter using primefaces 5.2 and jsf 2.2
Primefaces default filter work fine but when i select row to edit i got a wrong row .
My code is attached below :
<?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">
<ui:composition 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"
template="../template/template.xhtml">
<ui:define name="container clearfix">
<ui:insert>
<h:form id="Type_Utilisateur_Form">
<p:commandLink action="#{typeUtilisateurBean.create()}"
oncomplete="PF('popAddTypeUtilisateur').show();"
style="font-size: 15px;">
Add user type
</p:commandLink>
<p:outputPanel id="Type_Utilisateur_List">
<p:dataTable var="typeUtilisateur"
value="#{typeUtilisateurBean.listTypeUtilisateur}"
widgetVar="Type_Utilisateur_Table" rows="3" paginator="true"
rendered="true" emptyMessage="No records found with given criteria"
>
<f:facet name="header">
<p:outputPanel >
<p:inputText id="globalFilter"
onkeyup="PF('Type_Utilisateur_Table').filter()"
style="width:150px" placeholder="Search fields" />
</p:outputPanel>
</f:facet>
<p:column headerText="User Type designation"
sortBy="#{typeUtilisateur.designationTypeUtilisateur}"
filterBy="#{typeUtilisateur.designationTypeUtilisateur}"
filterStyle="display:none">
<h:outputText
value="#{typeUtilisateur.designationTypeUtilisateur}" />
</p:column>
<p:column headerText="Actions" style="width:120px">
<p:outputPanel>
<p:commandLink action="#{typeUtilisateurBean.getRow()}"
oncomplete="PF('popEditTypeUtilisateur').show();">
<p:graphicImage value="../template/images/file_edit.png"
width="48" height="48"></p:graphicImage>
</p:commandLink>
<p:commandLink action="#{typeUtilisateurBean.delete}"
update=":Type_Utilisateur_Form:Type_Utilisateur_List"
style="float: right;">
<p:graphicImage value="../template/images/file_delete.png"
width="48" height="48"></p:graphicImage>
</p:commandLink>
</p:outputPanel>
</p:column>
</p:dataTable>
</p:outputPanel>
</h:form>
<p:dialog widgetVar="popEditTypeUtilisateur" modal="true"
header="EDIT">
<p:ajax event="close"
update=":Type_Utilisateur_Form:Type_Utilisateur_List" />
<p:outputPanel autoUpdate="true">
<h:form>
<p:panelGrid columns="2" layout="grid">
<h:outputLabel value="User Type designation :" />
<p:inputText id="designationTypeUtilisateur"
value="#{typeUtilisateurBean.typeUtilisateur.designationTypeUtilisateur}" />
</p:panelGrid>
<p:commandButton value="Save" action="#{typeUtilisateurBean.save}"
oncomplete="if (!args.validationFailed) PF('popEditTypeUtilisateur').hide();" />
<p:commandButton value="Cancel"
action="#{typeUtilisateurBean.init}"
oncomplete="PF('popEditTypeUtilisateur').hide();" />
</h:form>
</p:outputPanel>
</p:dialog>
<p:dialog widgetVar="popAddTypeUtilisateur" modal="true" header="Add">
<p:ajax event="close"
update=":Type_Utilisateur_Form:Type_Utilisateur_List" />
<p:outputPanel autoUpdate="true">
<h:form>
<p:panelGrid columns="2" layout="grid">
<h:outputLabel value=" User
Type designation :" />
<p:inputText id="designationTypeUtilisateur"
value="#{typeUtilisateurBean.typeUtilisateur.designationTypeUtilisateur}" />
</p:panelGrid>
<p:commandButton value="Save" action="#{typeUtilisateurBean.save}"
oncomplete="if (!args.validationFailed) PF('popAddTypeUtilisateur').hide();" />
<p:commandButton value="Cancel"
action="#{typeUtilisateurBean.init}"
oncomplete="PF('popAddTypeUtilisateur').hide();" />
</h:form>
</p:outputPanel>
</p:dialog>
</ui:insert>
</ui:define>
</ui:composition>
Here we go with primefaces example:
What is important:
in this code set editable="true"
p:ajax event="rowEdit" and p:ajax event="rowEditCancel" both listeners
f:facet name="output" and f:facet name="input" for display, and
edit a column with p:rowEditor
CODE .xhtml:
<p:dataTable id="cars1" var="car" value="#{dtEditView.cars1}" editable="true" style="margin-bottom:20px">
<p:ajax event="rowEdit" listener="#{dtEditView.onRowEdit}" update=":form:msgs" />
<p:ajax event="rowEditCancel" listener="#{dtEditView.onRowCancel}" update=":form:msgs" />
<p:column headerText="Id">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{car.id}" /></f:facet>
<f:facet name="input"><p:inputText id="modelInput" value="#{car.id}" style="width:100%"/></f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Year">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{car.year}" /></f:facet>
<f:facet name="input"><p:inputText value="#{car.year}" style="width:100%" label="Year"/></f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Brand">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{car.brand}" /></f:facet>
<f:facet name="input">
<h:selectOneMenu value="#{car.brand}" style="width:100%">
<f:selectItems value="#{dtEditView.brands}" var="man" itemLabel="#{man}" itemValue="#{man}" />
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Color">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{car.color}" /></f:facet>
<f:facet name="input">
<h:selectOneMenu value="#{car.color}" style="width:100%">
<f:selectItems value="#{dtEditView.colors}" var="color" itemLabel="#{color}" itemValue="#{color}" />
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
<p:column style="width:32px">
<p:rowEditor />
</p:column>
</p:dataTable>
in my table i have column named actions that contains two icons one for update row and the other for delete row.I like to work like that.I have also iput text in order to filter my table and it's work.but if the function PF('carsTable').filter() is called i cannot get the right row selected !
IistUsers.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">
<ui:composition 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"
template="../template/template.xhtml">
<ui:define name="container clearfix">
<ui:insert>
<h:form id="Type_Utilisateur_Form">
<p:commandLink action="#{typeUtilisateurBean.create()}"
oncomplete="PF('popAddTypeUtilisateur').show();"
style="font-size: 15px;">
Add user type
</p:commandLink>
<p:outputPanel id="Type_Utilisateur_List" rendered="true">
<p:dataTable var="typeUtilisateur"
value="#{typeUtilisateurBean.listTypeUtilisateur}"
widgetVar="Type_Utilisateur_Table" rows="3" paginator="true"
rendered="true" emptyMessage="No records found with given criteria"
filteredValue="#{typeUtilisateurBean.filteredTypeUtilisateur}"
id="Type_Utilisateur_Table"
>
<f:facet name="header">
<p:outputPanel autoUpdate="true">
<p:inputText id="globalFilter"
onkeyup="PF('Type_Utilisateur_Table').filter()"
style="width:150px" placeholder="Search fields" />
</p:outputPanel>
</f:facet>
<p:column headerText="User Type designation"
sortBy="#{typeUtilisateur.designationTypeUtilisateur}"
filterBy="#{typeUtilisateur.designationTypeUtilisateur}"
filterStyle="display:none" filterMatchMode="contains">
<h:outputText
value="#{typeUtilisateur.designationTypeUtilisateur}" />
</p:column>
<p:column headerText="Actions" style="width:120px">
<p:outputPanel>
<p:commandLink action="#{typeUtilisateurBean.getRow()}"
oncomplete="PF('popEditTypeUtilisateur').show();"
>
<p:graphicImage value="../template/images/file_edit.png"
width="48" height="48"></p:graphicImage>
</p:commandLink>
<p:commandLink action="#{typeUtilisateurBean.delete}"
update=":Type_Utilisateur_Form:Type_Utilisateur_List"
style="float: right;">
<p:graphicImage value="../template/images/file_delete.png"
width="48" height="48"></p:graphicImage>
</p:commandLink>
</p:outputPanel>
</p:column>
</p:dataTable>
</p:outputPanel>
</h:form>
<p:dialog widgetVar="popEditTypeUtilisateur" modal="true"
header="EDIT">
<p:ajax event="close"
update=":Type_Utilisateur_Form:Type_Utilisateur_List" />
<p:outputPanel autoUpdate="true">
<h:form>
<p:panelGrid columns="2" layout="grid">
<h:outputLabel value="User Type designation :" />
<p:inputText id="designationTypeUtilisateur"
value="#{typeUtilisateurBean.typeUtilisateur.designationTypeUtilisateur}" />
</p:panelGrid>
<p:commandButton value="Save" action="#{typeUtilisateurBean.save}"
oncomplete="if (!args.validationFailed) PF('popEditTypeUtilisateur').hide();" />
<p:commandButton value="Cancel"
action="#{typeUtilisateurBean.init}"
oncomplete="PF('popEditTypeUtilisateur').hide();" />
</h:form>
</p:outputPanel>
</p:dialog>
<p:dialog widgetVar="popAddTypeUtilisateur" modal="true" header="Add">
<p:ajax event="close"
update=":Type_Utilisateur_Form:Type_Utilisateur_List" />
<p:outputPanel autoUpdate="true">
<h:form>
<p:panelGrid columns="2" layout="grid">
<h:outputLabel value=" User
Type designation :" />
<p:inputText id="designationTypeUtilisateur"
value="#{typeUtilisateurBean.typeUtilisateur.designationTypeUtilisateur}" />
</p:panelGrid>
<p:commandButton value="Save" action="#{typeUtilisateurBean.save}"
oncomplete="if (!args.validationFailed) PF('popAddTypeUtilisateur').hide();" />
<p:commandButton value="Cancel"
action="#{typeUtilisateurBean.init}"
oncomplete="PF('popAddTypeUtilisateur').hide();" />
</h:form>
</p:outputPanel>
</p:dialog>
</ui:insert>
</ui:define>
</ui:composition>
TypeUtilisateurBean:
package tn.com.bj.presentation;
import java.io.Serializable;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ViewScoped;
import javax.faces.model.ListDataModel;
import org.primefaces.context.RequestContext;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;
import tn.com.bj.entities.TypeUtilisateur;
import tn.com.bj.service.ITypeUtilisateurService;
#Controller("typeUtilisateurBean")
#Scope("session")
#ViewScoped
public class TypeUtilisateurBean implements Serializable {
/**
*
*/
private static final long serialVersionUID = 1L;
#Autowired
#Qualifier("typeutilisateurService")
private ITypeUtilisateurService typeUtilisateurService;
private TypeUtilisateur typeUtilisateur = new TypeUtilisateur();
private ListDataModel listTypeUtilisateur;
private List<TypeUtilisateur> filteredTypeUtilisateur;
#PostConstruct
public void init() {
listTypeUtilisateur = new ListDataModel();
listTypeUtilisateur.setWrappedData(typeUtilisateurService
.findAll(TypeUtilisateur.class));
}
public void create() {
typeUtilisateur = new TypeUtilisateur();
}
public void getRow() {
typeUtilisateur = (TypeUtilisateur) listTypeUtilisateur.getRowData();
}
public void delete() {
getRow();
typeUtilisateurService.deleteService(typeUtilisateur);
listTypeUtilisateur.setWrappedData(typeUtilisateurService
.findAll(TypeUtilisateur.class));
}
public void save() {
typeUtilisateur = typeUtilisateurService
.saveOrUpdateService(typeUtilisateur);
init();
}
public ITypeUtilisateurService getTypeUtilisateurService() {
return typeUtilisateurService;
}
public void setTypeUtilisateurService(
ITypeUtilisateurService typeUtilisateurService) {
this.typeUtilisateurService = typeUtilisateurService;
}
public TypeUtilisateur getTypeUtilisateur() {
return typeUtilisateur;
}
public void setTypeUtilisateur(TypeUtilisateur typeUtilisateur) {
this.typeUtilisateur = typeUtilisateur;
}
public ListDataModel getListTypeUtilisateur() {
return listTypeUtilisateur;
}
public void setListTypeUtilisateur(ListDataModel listTypeUtilisateur) {
this.listTypeUtilisateur = listTypeUtilisateur;
}
public List<TypeUtilisateur> getFilteredTypeUtilisateur() {
return filteredTypeUtilisateur;
}
public void setFilteredTypeUtilisateur(
List<TypeUtilisateur> filteredTypeUtilisateur) {
this.filteredTypeUtilisateur = filteredTypeUtilisateur;
}
}
What I want is to display a lightbox right after the page is loaded. I mean, when the user receives the page, the lightbox automatically shows and stays on untill it is closed. How can I do this?
<?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: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">
<ui:composition template="/WEB-INF/include/template.xhtml">
<ui:define name="title">
<h:outputText value="#{jorBundle.AppName}"></h:outputText>
</ui:define>
<ui:define name="body">
<p:lightBox width="20%" height="80%" >
<h:outputLink value="#" title="Marcel Vieira" >
<h:outputText value="some description here"/>
</h:outputLink>
<f:facet name="inline">
<h:panelGrid columns="2">
<p:graphicImage value="/resources/images/ich.jpg" />
<h:outputText style="color:#FFFFFF" value="some text in here...." />
</h:panelGrid>
</f:facet>
</p:lightBox>
<p:panel header="#{jorBundle.Welcome}">
<p><h:outputText value="#{jorBundle.WelcomeMessage}"></h:outputText></p>
</p:panel>
<p:panel header="Gráfico Divisões UPB" menuTitle="menu" collapsed="true" >
<p><h:outputText value="Gráfico"></h:outputText></p>
</p:panel>
</ui:define>
</ui:composition>
</html>
Thanks in advance.
You could use the primefaces javascript, which requires an ID on the lightbox.
Component:
<p:lightBox width="20%" height="80%" id='myLightBox'>
<h:outputLink value="#" title="Marcel Vieira" >
<h:outputText value="some description here"/>
</h:outputLink>
<f:facet name="inline">
<h:panelGrid columns="2">
<p:graphicImage value="/resources/images/ich.jpg" />
<h:outputText style="color:#FFFFFF" value="some text in here...." />
</h:panelGrid>
</f:facet>
</p:lightBox>
Javascript:
<script>
document.addEventListener("DOMContentLoaded", function() {
PF('myLightBox').show();
});
</script>
A simple solution is to set the visible attribute to true:
<p:lightBox width="20%" height="80%" visible="true">
<h:outputLink value="#" title="Marcel Vieira" >
<h:outputText value="some description here"/>
</h:outputLink>
<f:facet name="inline">
<h:panelGrid columns="2">
<p:graphicImage value="/resources/images/ich.jpg" />
<h:outputText style="color:#FFFFFF" value="some text in here...." />
</h:panelGrid>
</f:facet>
</p:lightBox>
i got this error while creating index.xhtml. i'm working with primefaces 3.4
in my page index ,i will display a list of zones and when i click on the add button ,a dialog window should appear.the error is :
"javax.faces.FacesException: Cannot find component with identifier "nZone" referenced from "j_idt10"."
<?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>Listes des zones</title>
<link type="text/css" rel="stylesheet" href="dot-luv/theme.css"/>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="left" header="Atividades" resizable="true" closable="true" collapsible="true">
<h:form prependId="false">
<p:commandLink value="Nouvelle Zone" actionListener="#{ZoneController.preparAddZone()}" update="nZone" oncomplete="dialogGerLivro.show()"/>
</h:form>
<h:outputLink value="#{facesContext.externalContext.requestContextPath}/j_spring_security_logout">
<h:outputText value="Sair"/>
</h:outputLink>
</p:layoutUnit>
<p:layoutUnit position="center">
<h1>Listes des zones</h1><br/>
<br/><br/>
<h:form prependId="false">
<p:dataTable id="table" var="zone" value="#{ZoneController.listZones}">
<p:column>
<f:facet name="header">
<h:outputText value="Zone"/>
</f:facet>
<h:outputText value="#{zone.nomzone}" />
</p:column>
<f:facet name="header">
<h:outputText value="Modifier"/>
</f:facet>
<p:commandButton actionListener="#{ZoneController.preparEditZone()}" value="Modifier" update="nZone" oncomplete="dialogGerLivro.show()"/>
<p:column>
<f:facet name="header">
<h:outputText value="Supprimer"/>
</f:facet>
<h:commandLink action="#{ZoneController.DeleteZone}" value="Supprimer"/>
</p:column>
</p:dataTable>
</h:form>
</p:layoutUnit>
</p:layout>
<p:dialog header="Ajouter Zone" widgetVar="dialogGerLivro" resizable="false" modal="true" showEffect="slide" width="500">
<h:form prependId="false">
<h:panelGrid id="nZone" columns="2" style="margin-bottom:10px">
<h:outputLabel for="titulo" value="Título:" />
<h:inputText id="titulo" value="#{ZoneController.zone.nomzone}"/>
<p:commandButton update="tabele" oncomplete="dialogGerLivro.hide();" actionListener="#{ZoneController.SaveZone}" value="Insérer Zone"/>
<p:commandButton update="tabele" oncomplete="dialogGerLivro.hide();" actionListener="#{ZoneController.UpdateZone}" value="Modifier Zone"/>
</h:panelGrid>
</h:form>
</p:dialog>
</h:body>
</ht
<h:panelGrid id="nZone" columns="2" style="margin-bottom:10px">
is inside a h:form which is another NamingContainer, where you
<p:commandLink value="Nouvelle Zone" actionListener="#{ZoneController.preparAddZone()}" update="nZone" oncomplete="dialogGerLivro.show()"/>
and
<p:commandButton actionListener="#{ZoneController.preparEditZone()}" value="Modifier" update="nZone" oncomplete="dialogGerLivro.show()"/>
Try refering to it with update=":nZone". See the link to the other question for more information.