primefaces dynamic navigation not working properly

primefaces dynamic navigation not working properly - jsf

hello I have this page which work correctly and where I change pages dynamically
from bean with include tag:
<!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="50" id="top">
<ui:include src="/WEB-INF/template/header.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="south" size="20">
<ui:include src="/WEB-INF/template/footer.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="west" size="400">
<h:form>
<f:ajax render=":centerContentPanel" execute="#this">
<h:commandLink value="page1" action="#{navigationBean.doNav}" update=":centerContentPanel">
<f:param name="test" value="/WEB-INF/pages/profil" />
</h:commandLink>
<h:commandLink value="page2" action="#{navigationBean.doNav}" process="#this">
<f:param name="test" value="/WEB-INF/pages/users" />
</h:commandLink>
</f:ajax>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" size="400">
<h:panelGroup id="centerContentPanel">
<ui:include src="#{navigationBean.pageName}.xhtml" />
</h:panelGroup>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
In the included pages I have a dialog which contain and included page also.
When I open the dialog the screen stuck and I can't change anything or press anything it become like a disabled 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"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:form id="form">
<p:growl id="message" showDetail="true" globalOnly="true" />
<p:dataTable var="user" value="#{usersBean.users}" paginator="true"
reflow="true" widgetVar="multipleDT" resizableColumns="true"
id="multipleDT"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15" selectionMode="single"
selection="#{usersBean.selectedUser}" rowKey="#{user.util}">
<p:ajax event="rowSelect" listener="#{usersBean.onRowSelect}"
update="b4 b3 :form:pickList :form:Submit" />
<p:ajax event="rowUnselect" listener="#{usersBean.onRowUnselect}"
update="b4 b3 :form:pickList :form:Submit" />
<p:column headerText="util" filterMatchMode="contains"
filterBy="#{user.util}" sortBy="#{user.util}" reflow="true">
<h:outputText value="#{user.util}" />
</p:column>
<p:column headerText="nom" filterMatchMode="contains"
filterBy="#{user.nom}" sortBy="#{user.nom}" reflow="true">
<h:outputText value="#{user.nom}" />
</p:column>
<p:column headerText="prenom" filterMatchMode="contains"
filterBy="#{user.prenom}" sortBy="#{user.prenom}" reflow="true">
<h:outputText value="#{user.prenom}" />
</p:column>
<p:column headerText="mail" filterMatchMode="contains"
filterBy="#{user.mail}" sortBy="#{user.mail}" reflow="true">
<h:outputText value="#{user.mail}" />
</p:column>
<f:facet name="footer">
<p:commandButton id="b3" value="ajouter"
oncomplete="PF('dlg3').show();" process="#this" ajax="true"
update="#widgetVar(dlg3) multipleDT">
</p:commandButton>
<p:commandButton id="b4" value="modifier"
disabled="#{usersBean.dis}" oncomplete="PF('dlg2').show();"
ajax="true" process="#this" update="#widgetVar(dlg2) multipleDT">
</p:commandButton>
</f:facet>
</p:dataTable>
<p:pickList id="pickList" value="#{usersBean.profilNonAffecte}"
var="Profil" itemLabel="#{Profil.libProfil}" itemValue="#{Profil}"
effect="bounce" responsive="true" showSourceFilter="true"
showTargetFilter="true" filterMatchMode="contains"
disabled="#{usersBean.dis}" style="width:50%;margin-top:20px;"
converter="primeFacesPickListConverter">
<f:facet name="sourceCaption">Available</f:facet>
<f:facet name="targetCaption">Starting</f:facet>
</p:pickList>
<p:commandButton id="Submit" value="Submit" style="margin-top:5px"
action="#{usersBean.commit}" update="pickList form:message"
disabled="#{usersBean.dis}" />
</h:form>
<h:form>
<p:dialog style="font-size:12px;" widgetVar="dlg3" resizable="false"
width="800" showEffect="explode" hideEffect="explode" modal="true"
id="dlg3" dynamic="true">
<ui:include src="/WEB-INF/pages/ajoutUser.xhtml" />
</p:dialog>
</h:form>
<h:form>
<p:dialog style="font-size:12px;" widgetVar="dlg2" resizable="false"
width="800" showEffect="explode" hideEffect="explode" modal="true"
id="dlg2" dynamic="true">
<ui:include src="/WEB-INF/pages/modifUser.xhtml" />
</p:dialog>
</h:form>
</ui:composition>
dialog code
<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:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:panelGrid columns="2" id="grid">
<p:outputLabel for="ta4" value="date début :" />
<p:calendar id="ta4" value="#{usersBean.selectedUser.dateDeb}"
showOn="button" label="date début" required="true"
binding="#{startDateComponent}" pattern="dd/MM/yyyy" navigator="true">
<p:message for="ta4" />
<p:ajax event="dateSelect" listener="#{usersBean.onDateSelect}"
update="ta4" />
</p:calendar>
<p:outputLabel for="ta5" value="date fin :" />
<p:calendar id="ta5" value="#{usersBean.selectedUser.dateFin}"
showOn="button" label="date fin" required="true" pattern="dd/MM/yyyy"
mode="popup">
<f:validator validatorId="dateRangeValidator" />
<f:attribute name="startDateComponent" value="#{startDateComponent}" />
<p:message for="ta5" />
</p:calendar>
<p:outputLabel for="ta6" value="nom :" label="nom" />
<p:inputText rows="6" cols="33" id="ta6"
value="#{usersBean.selectedUser.nom}" required="true">
<p:message for="ta6" />
</p:inputText>
<p:outputLabel for="ta7" value="prénom :" />
<p:inputText rows="6" cols="33" id="ta7"
value="#{usersBean.selectedUser.prenom}" required="true"
label="prenom">
<p:message for="ta7" />
</p:inputText>
<p:outputLabel for="ta8" value="mail :" />
<p:inputText rows="6" cols="33" id="ta8"
value="#{usersBean.selectedUser.mail}" required="true" label="mail"
validatorMessage="email format error ">
<f:validateRegex
pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*#[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
<p:message for="ta8" />
</p:inputText>
<p:outputLabel for="chk" value="Valid :" />
<p:selectBooleanCheckbox value="#{usersBean.selectedUser.valid}"
id="chk" />
<p:commandButton value="confirmer" id="ajax"
actionListener="#{usersBean.modifier}"
styleClass="ui-priority-primary" update="grid form:message form:multipleDT" >
</p:commandButton>
</h:panelGrid>
</ui:composition>

i find it the problem was modal="true" in the dialog

Related

PrimeFaces Tabview 2nd tab not displaying - conditionally [duplicate]

This question already has an answer here:
Manually adding / loading jQuery with PrimeFaces results in Uncaught TypeErrors
(1 answer)
Closed 7 years ago.
I'm having an unusual problem with a page which contains a Tree on the left, and a TabView on the right. I have implemented 2 tabs so far. If the first tab is "Profile", then the 2nd tab, "Users" does not display (the tab title is there, but when selected there is no content under the tab). If I switch the order and put "Users" first, then both tabs display.
I tried changing the content on "Users" - I first used an accordionPanel, then thought perhaps the tabs on TabView and Accordion were getting confused and changed it to a dataList. The content in the "Users" panel doesn't seem to matter.
I'll show the xhtml code when it works, and when it doesn't.
Users panel does not show:
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:rich="http://richfaces.org/rich"
xmlns:t="http://myfaces.apache.org/tomahawk"
xmlns:p="http://primefaces.org/ui"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
xmlns:cust="http://memarden.com">
<link href="CSS/navigation.css" rel="stylesheet" type="text/css" />
<h:body>
<h3>#{text['organization']}</h3>
<ui:composition template="template-restricted.xhtml">
<ui:define name="body_content">
<h:form id="mainForm">
<div id="title" class="sl-title">Manage Schools - #{manageOrgHierarchy.selectedOrganization.displayString}</div>
<div class="sr-content">
<div class="ui-grid ui-grid-responsive"><div class="ui-grid-row">
<div class="ui-grid-col-4"><p:panel layout="block">
<p:toolbar><f:facet name="left">
<p:commandButton
title="New Root Org"
icon="fa fa-folder-open"
rendered="#{userSession.isAdmin}"
process="#form"
update="#form"
action="#{manageOrgHierarchy.createNewRootOrg}" />
<p:commandButton
title="#{text['new.item']}"
icon="fa fa-folder-open"
process="#form"
update="#form"
action="#{manageOrgHierarchy.createNewSubOrg}" />
<p:commandButton
title="#{text['delete']}"
icon="fa fa-trash"
process="#form"
update="#form"
disabled="#{not manageOrgHierarchy.canBeDeleted}"
action="#{manageOrgHierarchy.delete}" />
<p:commandButton
title="#{text['save']}"
icon="fa fa-save"
process="#form"
update="#form"
action="#{manageOrgHierarchy.save}" />
</f:facet></p:toolbar>
<p:tree
id="orgTree"
value="#{manageOrgHierarchy.rootNodes}"
selectionMode="single"
selection="#{manageOrgHierarchy.selectedNode}"
style="ui-grid-col-2"
var="node">
<p:ajax event="select" update="mainForm" listener="#{manageOrgHierarchy.nodeSelected}" />
<p:ajax event="unselect" update="mainForm" listener="#{manageOrgHierarchy.nodeUnselected}" />
<p:ajax event="expand" listener="#{manageOrgHierarchy.nodeExpanded}" />
<p:ajax event="collapse" listener="#{manageOrgHierarchy.nodeCollapsed}" />
<p:treeNode type="OrganizationHierarchy">
<h:outputText value="#{node.nickName}" />
</p:treeNode>
</p:tree></p:panel>
</div>
<div class="ui-grid-col-8">
<p:tabView>
<p:tab title="#{text['profile']}">
<p:panelGrid columns="2" layout="grid">
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="name" value="#{text['name']}" />
<p:inputText id="name" value="#{manageOrgHierarchy.editOrg.nickName}" />
</p:panelGrid>
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="phone" value="#{text['phone']}" />
<p:inputText id="phone" value="#{manageOrgHierarchy.editOrg.phone}" />
</p:panelGrid>
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="address" value="#{text['address']}" />
<p:inputText id="address" value="#{manageOrgHierarchy.editOrg.address}" />
</p:panelGrid>
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="city" value="#{text['city']}" />
<p:inputText id="city" value="#{manageOrgHierarchy.editOrg.city}" />
</p:panelGrid>
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="state" value="#{text['state']}" />
<p:inputText id="state" value="#{manageOrgHierarchy.editOrg.state}" />
</p:panelGrid>
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="postalCode" value="#{text['post.code']}" />
<p:inputText id="postalCode" value="#{manageOrgHierarchy.editOrg.postalCode}" />
</p:panelGrid>
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="country" value="#{text['address.country']}" />
<p:inputText id="country" value="#{manageOrgHierarchy.editOrg.country}" />
</p:panelGrid>
</p:panelGrid>
<h:panelGroup>
<p:commandButton
value="#{text['cancel']}"
icon="fa fa-trash"
process="#form"
update="#form"
action="#{manageOrgHierarchy.cancelEditOrg}" />
<p:commandButton
value="#{text['save']}"
icon="fa fa-save"
process="#form"
update="#form"
action="#{manageOrgHierarchy.saveEditOrg}" />
</h:panelGroup>
</p:tab>
<p:tab title="#{text['users']}">
<p:dataList value="#{manageOrgHierarchy.userPermissions}" var="p">
<p:panelGrid columns="2">
<cust:avatarOutput owner="#{p.user}" session="#{userSession}"/>
<p:panelGrid columns="1">
<h:outputText value="#{p.user.displayString}" />
<h:outputText value="#{p.user.name}" />
</p:panelGrid>
</p:panelGrid>
</p:dataList>
</p:tab>
<p:tab title="#{text['lessons']}"></p:tab>
<p:tab title="#{text['reports']}"></p:tab>
</p:tabView></div></div></div>
</div>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
Both panels 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://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:rich="http://richfaces.org/rich"
xmlns:t="http://myfaces.apache.org/tomahawk"
xmlns:p="http://primefaces.org/ui"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
xmlns:cust="http://memarden.com">
<link href="CSS/navigation.css" rel="stylesheet" type="text/css" />
<h:body>
<h3>#{text['organization']}</h3>
<ui:composition template="template-restricted.xhtml">
<ui:define name="body_content">
<h:form id="mainForm">
<div id="title" class="sl-title">Manage Schools - #{manageOrgHierarchy.selectedOrganization.displayString}</div>
<div class="sr-content">
<div class="ui-grid ui-grid-responsive"><div class="ui-grid-row">
<div class="ui-grid-col-4"><p:panel layout="block">
<p:toolbar><f:facet name="left">
<p:commandButton
title="New Root Org"
icon="fa fa-folder-open"
rendered="#{userSession.isAdmin}"
process="#form"
update="#form"
action="#{manageOrgHierarchy.createNewRootOrg}" />
<p:commandButton
title="#{text['new.item']}"
icon="fa fa-folder-open"
process="#form"
update="#form"
action="#{manageOrgHierarchy.createNewSubOrg}" />
<p:commandButton
title="#{text['delete']}"
icon="fa fa-trash"
process="#form"
update="#form"
disabled="#{not manageOrgHierarchy.canBeDeleted}"
action="#{manageOrgHierarchy.delete}" />
<p:commandButton
title="#{text['save']}"
icon="fa fa-save"
process="#form"
update="#form"
action="#{manageOrgHierarchy.save}" />
</f:facet></p:toolbar>
<p:tree
id="orgTree"
value="#{manageOrgHierarchy.rootNodes}"
selectionMode="single"
selection="#{manageOrgHierarchy.selectedNode}"
style="ui-grid-col-2"
var="node">
<p:ajax event="select" update="mainForm" listener="#{manageOrgHierarchy.nodeSelected}" />
<p:ajax event="unselect" update="mainForm" listener="#{manageOrgHierarchy.nodeUnselected}" />
<p:ajax event="expand" listener="#{manageOrgHierarchy.nodeExpanded}" />
<p:ajax event="collapse" listener="#{manageOrgHierarchy.nodeCollapsed}" />
<p:treeNode type="OrganizationHierarchy">
<h:outputText value="#{node.nickName}" />
</p:treeNode>
</p:tree></p:panel>
</div>
<div class="ui-grid-col-8">
<p:tabView>
<p:tab title="#{text['users']}">
<p:dataList value="#{manageOrgHierarchy.userPermissions}" var="p">
<p:panelGrid columns="2">
<cust:avatarOutput owner="#{p.user}" session="#{userSession}"/>
<p:panelGrid columns="1">
<h:outputText value="#{p.user.displayString}" />
<h:outputText value="#{p.user.name}" />
</p:panelGrid>
</p:panelGrid>
</p:dataList>
</p:tab>
<p:tab title="#{text['profile']}">
<p:panelGrid columns="2" layout="grid">
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="name" value="#{text['name']}" />
<p:inputText id="name" value="#{manageOrgHierarchy.editOrg.nickName}" />
</p:panelGrid>
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="phone" value="#{text['phone']}" />
<p:inputText id="phone" value="#{manageOrgHierarchy.editOrg.phone}" />
</p:panelGrid>
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="address" value="#{text['address']}" />
<p:inputText id="address" value="#{manageOrgHierarchy.editOrg.address}" />
</p:panelGrid>
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="city" value="#{text['city']}" />
<p:inputText id="city" value="#{manageOrgHierarchy.editOrg.city}" />
</p:panelGrid>
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="state" value="#{text['state']}" />
<p:inputText id="state" value="#{manageOrgHierarchy.editOrg.state}" />
</p:panelGrid>
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="postalCode" value="#{text['post.code']}" />
<p:inputText id="postalCode" value="#{manageOrgHierarchy.editOrg.postalCode}" />
</p:panelGrid>
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="country" value="#{text['address.country']}" />
<p:inputText id="country" value="#{manageOrgHierarchy.editOrg.country}" />
</p:panelGrid>
</p:panelGrid>
<h:panelGroup>
<p:commandButton
value="#{text['cancel']}"
icon="fa fa-trash"
process="#form"
update="#form"
action="#{manageOrgHierarchy.cancelEditOrg}" />
<p:commandButton
value="#{text['save']}"
icon="fa fa-save"
process="#form"
update="#form"
action="#{manageOrgHierarchy.saveEditOrg}" />
</h:panelGroup>
</p:tab>
<p:tab title="#{text['lessons']}"></p:tab>
<p:tab title="#{text['reports']}"></p:tab>
</p:tabView></div></div></div>
</div>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>

This was caused by unrelated javascript in a menu section which declared a jquery.js library. When I removed the offending import, all of the strange Primefaces errors went away. It seems declaring other jquery libraries interferes with Primefaces code.

Resizing a p:ring

Is there anyway to resize the <p:ring>? I tried with "width" and "height" but it didn't work. The windows are always small and I want them bigger.
This is the XHTML code:
<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"
template="/template/templatePCD1.xhtml"
xmlns:p="http://primefaces.org/ui"
xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<ui:define name="pageTitle">Groupe details</ui:define>
<ui:define name="pageContent" >
<h:form id="form" >
<h3 style="margin-top: 0">Groupe details</h3>
<p:ring id="custom" value="#{allGroupeBean.groupes}" var="car" >
<p:panel >
<p:column >
<p:panelGrid columns="1" >
<h:outputText value="#{car.nom}" />
<p:commandButton update=":form:carDetail" icon="ui-icon-search" title="View" oncomplete="PF('carDialog').show();" >
<f:setPropertyActionListener value="#{car}" target=" #{allGroupeBean.selectedGroupe}" />
</p:commandButton>
</p:panelGrid>
</p:column>
<br/>
</p:panel>
</p:ring>
<p:dialog header="Groupe Info" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false" width="470">
<p:outputPanel id="carDetail" style="text-align:center;" layout="block">
<p:dataTable id="selectedCarsTable" var="car" value="# {allGroupeBean.selectedGroupe.teams}">
<p:column headerText="Teams">
<h:outputText value="#{car.nom}" />
</p:column>
<p:column headerText="Points">
<h:outputText value="#{car.point}" />
</p:column>
</p:dataTable>
</p:outputPanel>
</p:dialog>
</h:form>
</ui:define>
</ui:composition>
It shows small windows and I need bigger ones.

My p:dialog is never called

Well, my problem is that no dialog inside my main page is called. I.E: I have a commandButton should call "varDialogFindPacientes" but don't work. I don't know what can i do to fix it.
Look my main 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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions">
<h:head>
</h:head>
<h:body>
<ui:composition>
<p:dialog id="dialogCadastrar" width="900px" height="500px"
header="Cadastrar Orçamento" widgetVar="varDialogCadastrar"
modal="true" showEffect="fade" hideEffect="fade">
<h:form id="formCadastrar">
<p:panelGrid id="panelGridCadastar" styleClass="semBorda"
columns="2">
<h:outputText value="Data Emissão: " />
<p:inputText id="dataEmissao"
value="#{orcamentoMB.orcamento.dataEmissao}" readonly="true">
<f:convertDateTime pattern="dd/MM/yyyy" />
</p:inputText>
<h:outputText value="Data Validade: " />
<p:inputText id="dataValidade"
value="#{orcamentoMB.orcamento.dataValidade}" readonly="true">
<f:convertDateTime pattern="dd/MM/yyyy" />
</p:inputText>
<h:outputText value="Situação " />
<p:inputText id="situacao"
value="#{orcamentoMB.orcamento.situacao.descricao}"
readonly="true" />
<h:outputText value="Desconto (%): " />
<p:panelGrid columns="2" styleClass="semBorda">
<pe:inputNumber value="#{orcamentoMB.orcamento.desconto}"
id="desconto" symbol=" %" symbolPosition="suffix"
validatorMessage="O desconto não pode ser maior que #{orcamentoMB.maxDesconto} %">
<f:validateDoubleRange maximum="#{orcamentoMB.maxDesconto}" />
</pe:inputNumber>
<p:commandButton value="Recalcular" process="desconto"
icon="ui-icon-refresh"
update=":formCadastrar:totalGeral, :formCadastrar:totalGeralComDesconto" />
</p:panelGrid>
<h:outputText value="Observação: " />
<p:inputTextarea value="#{orcamentoMB.orcamento.observacoes}"
rows="5" cols="30" />
<h:outputText value="Dentista: *" />
<p:panel style="border:1px solid #e5e5e5;">
<p:inputText required="true"
requiredMessage="Selecione um dentista"
value="#{orcamentoMB.orcamento.dentistaOrcou.pessoaFisica.nome}"
readonly="true" size="30" id="dentistaOrcou" />
<p:commandButton icon="ui-icon-search" type="button"
onclick="varDialogFindDentistas.show()" />
</p:panel>
<h:outputText value="Paciente *" />
<p:panel style="border:1px solid #e5e5e5;">
<p:inputText required="true"
requiredMessage="Selecione um paciente"
value="#{orcamentoMB.orcamento.paciente.pessoaFisica.nome}"
readonly="true" size="30" id="paciente" />
<p:commandButton icon="ui-icon-search" type="button"
onclick="varDialogFindPacientes.show()" />
</p:panel>
</p:panelGrid>
<p:toolbar>
<p:toolbarGroup align="left">
<p:commandButton value="Add" icon="ui-icon-plus"
onclick="varDialogFindItensTabela.show()" type="button"
update=":formCadastrar:dataTableItens, :formCadastrar:salvarAceitando,:formCadastrar:salvarSemAceitar, :formCadastrar:totalGeral,
:formCadastrar:totalGeralComDesconto" />
<p:commandButton value="Del" icon="ui-icon-minus"
disabled="#{orcamentoMB.selectedItemOrcamento == null}"
actionListener="#{orcamentoMB.delItemOrcamento}"
update=":formCadastrar:dataTableItens, :formCadastrar:totalGeral,
:formCadastrar:totalGeralComDesconto, :formCadastrar:salvarAceitando,:formCadastrar:salvarSemAceitar" />
</p:toolbarGroup>
</p:toolbar>
<p:dataTable rowKey="#{item}" var="item"
value="#{orcamentoMB.itens}"
emptyMessage="Não foi encontrado nenhum registro"
id="dataTableItens"
selection="#{orcamentoMB.selectedItemOrcamento}"
selectionMode="single" rowIndexVar="rowIndex"
rowStyleClass="#{(rowIndex mod 2) eq 0 ? 'first-row' : 'second-row'}">
<p:column headerText="Nome"
sortBy="#{item.itemTabelaProcedimento.procedimento.nome}"
id="nome">
<h:outputText
value="#{item.itemTabelaProcedimento.procedimento.nome}" />
</p:column>
<p:column headerText="Valor"
sortBy="#{item.itemTabelaProcedimento.valor}" id="valor">
<h:outputText value="#{item.itemTabelaProcedimento.valor}">
<f:convertNumber currencySymbol="R$ " type="currency" />
</h:outputText>
</p:column>
<p:column headerText="Local Aplicação"
sortBy="#{item.localAplicacao.descricao}" id="localAplicacao">
<h:outputText value="#{item.localAplicacao.descricao}" />
</p:column>
<p:column headerText="Dente" sortBy="#{item.dente.descricao}"
id="dente">
<h:outputText value="#{item.dente.descricao}" />
</p:column>
<p:column headerText="Face"
sortBy="#{item.faceAplicacao.descricao}" id="face">
<h:outputText value="#{item.faceAplicacao.descricao}" />
</p:column>
</p:dataTable>
<p:panelGrid columns="2">
<h:outputText value="Total Geral: " />
<h:outputText value="#{orcamentoMB.totalGeral}" id="totalGeral">
<f:convertNumber currencySymbol="R$ " type="currency" />
</h:outputText>
<h:outputText value="Total Com Desconto: " />
<h:outputText value="#{orcamentoMB.totalGeralComDesconto}"
id="totalGeralComDesconto">
<f:convertNumber currencySymbol="R$ " type="currency" />
</h:outputText>
</p:panelGrid>
<p:toolbar>
<p:toolbarGroup align="left">
<p:commandButton icon="ui-icon-disk" value="Salvar Sem Aceitar"
id="salvarSemAceitar" disabled="#{orcamentoMB.itens.size() == 0}"
actionListener="#{orcamentoMB.salvar}"
oncomplete="if (!args.validationFailed){ varDialogCadastrar.hide() }"
update=":formOrcamentos:dataTableOrcamentos">
<f:attribute name="salvarAceitando" value="false" />
</p:commandButton>
<p:commandButton icon="ui-icon-disk" value="Salvar Aceitando"
id="salvarAceitando" disabled="#{orcamentoMB.itens.size() == 0}"
actionListener="#{orcamentoMB.salvar}"
oncomplete="if (!args.validationFailed){ varDialogCadastrar.hide() }"
update=":formOrcamentos:dataTableOrcamentos">
<f:attribute name="salvarAceitando" value="true" />
</p:commandButton>
<p:commandButton value="Cancelar" icon="ui-icon-close"
onclick="varDialogCadastrar.hide()" type="button" />
</p:toolbarGroup>
</p:toolbar>
</h:form>
</p:dialog>
</ui:composition>
</h:body>
</html>
So, i'll show a page the is called for "varDialogFindPacientes"
<!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">
<h:head>
</h:head>
<h:body>
<ui:composition>
<p:dialog id="dialogFindPacientes" width="600px" height="auto"
header="Pesquisar Pacientes" widgetVar="varDialogFindPacientes"
modal="true" showEffect="fade" hideEffect="fade">
<h:form id="formFindPacientes">
<p:dataTable rowKey="#{paciente.id}" var="paciente"
value="#{orcamentoMB.pacientes}" paginator="true"
emptyMessage="Não foi encontrado nenhum registro" rows="20"
id="dataTablePacientes" selection="#{orcamentoMB.selectedPaciente}"
selectionMode="single" rowIndexVar="rowIndex"
rowStyleClass="#{(rowIndex mod 2) eq 0 ? 'first-row' : 'second-row'}"
paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}">
<p:ajax event="rowDblselect" process="dataTablePacientes"
listener="#{orcamentoMB.updatePacienteFromFind}"
oncomplete="dialogFindPacientes.hide()"
update=":formCadastrar:paciente" />
<p:column headerText="Nome" sortBy="#{paciente.pessoaFisica.nome}"
filterBy="#{paciente.pessoaFisica.nome}" id="nome"
filterMatchMode="contains">
<h:outputText value="#{paciente.pessoaFisica.nome}" />
</p:column>
</p:dataTable>
</h:form>
</p:dialog>
</ui:composition>
</h:body>
</html>
EDIT 1:
I have another problem yet, the #PostConstruct from my ManagedBean is called every ajax call.

p:dataTable never refreshes after a delete, update or insert

Well, I have a p:dialog that inserts a new Entity, but after this entity is saved into database the p:dataTable remains the same, the new row doesn't appear.
Look at my p:dialog:
<!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">
<h:head>
</h:head>
<h:body>
<ui:composition>
<h:form id="formCadastrar">
<p:dialog width="900px" height="500px" header="Cadastrar Dentista"
widgetVar="dialogCadastrar" modal="true">
<p:panelGrid columns="2" styleClass="semBorda">
<p:commandButton icon="ui-icon-disk" value="Salvar"
actionListener="#{dentistaMB.salvar}"
update=":formDentistas:dataTableDentistas" />
<p:commandButton value="Cancelar" icon="ui-icon-close"
onclick="confirmCancelar.show()" type="button" />
</p:panelGrid>
<p:panelGrid id="panelGridCadastar" styleClass="semBorda"
columns="2">
<h:outputText value="Nome: *" />
<p:inputText id="nome"
value="#{dentistaMB.dentista.pessoaFisica.nome}" size="40"
required="true" requiredMessage="O Nome do Dentista é obrigatório">
</p:inputText>
<h:outputText value="CRO *" />
<p:inputText id="cro" value="#{dentistaMB.dentista.cro}" size="10"
required="true" requiredMessage="O Número do CRO é obrigatório" />
</p:panelGrid>
<p:panelGrid columns="2" styleClass="semBorda">
<p:commandButton icon="ui-icon-disk" value="Salvar"
actionListener="#{dentistaMB.salvar}"
update=":formDentistas:dataTableDentistas" />
<p:commandButton value="Cancelar" icon="ui-icon-close"
onclick="confirmCancelar.show()" />
</p:panelGrid>
<p:confirmDialog id="confirmCancelar" message="Deseja cancelar ?"
showEffect="fade" hideEffect="fade" header="Cancelar"
severity="alert" widgetVar="confirmCancelar" appendToBody="true">
<p:commandButton value="Sim" oncomplete="confirmCancelar.hide()"
actionListener="#{dentistaMB.cancelar}" />
<p:commandButton value="Não" onclick="confirmCancelar.hide()"
type="button" />
</p:confirmDialog>
</p:dialog>
</h:form>
</ui:composition>
</h:body>
</html>
And look at my p:dataTable
<h:form id="formDentistas">
<p:growl autoUpdate="true" id="growlmessages" />
<p:dataTable rowKey="#{dentista.id}" var="dentista" value="#{dentistaMB.dentistas}"
paginator="true" emptyMessage="Não foi encontrado nenhum registro"
rows="10" id="dataTableDentistas"
selection="#{dentistaMB.selectedDentista}" selectionMode="single">
<f:facet name="header">Lista de Dentistas</f:facet>
<p:column headerText="Nome" sortBy="nome" filterBy="nome" id="nome"
width="200px">
#{dentista.pessoaFisica.nome}
</p:column>
<p:column headerText="Data Nascimento" sortBy="dataNascimento"
filterBy="dataNascimento" id="dataNascimento" width="60px">
#{dentista.pessoaFisica.dataNascimento}
</p:column>
<p:column headerText="CRO" sortBy="cro" filterBy="cro" id="cro"
width="60px">
#{dentista.cro}
</p:column>
<f:facet name="footer">
<div class="align_text_left">
<p:commandButton icon="ui-icon-plus" value="Novo" id="cadastrar"
oncomplete="dialogCadastrar.show()" />
<p:column headerText="Ações" style="width:50px;">
<p:commandButton value="Alterar" icon="ui-icon-pencil" />
<p:commandButton value="Remover" icon="ui-icon-trash"
action="#{dentistaMB.deletar}"
update=":formDentistas:dataTableDentistas" />
</p:column>
</div>
</f:facet>
</p:dataTable>
</h:form>
So, what's the correct form to update the p:dataTable after a change in an entity? This example above is about an insert, but remove doesn't work either. I used the following code:
<p:commandButton value="Remover" icon="ui-icon-trash"
action="#{dentistaMB.deletar}"
update=":formDentistas:dataTableDentistas" />

in your dialog you must add an ajax event to fire update of form like:
<p:ajax event="close" listener="#{dentistaMB.load}"
update=":formDentistas" immediate="true" global="false" />
this will allow you to reload your table feed lists.
in your load method you need to update (refetch data from db) dentistas list. If you are using filtering do not forget to update your filtering list as well.
In managedbean load function you can use:
public void load(){
dentistas.clear();
filteredDentistas.clear();
dentistas.addAll(getDentistService().getDentists());
filteredDentistas.addAll(getDentistService().getDentists());
}

Load diff-diff data tables in center layout with tree event

I am using JSF 2.1 and PrimeFaces 3.0.M4. I want to change center layout dynamically without reloading the main page on click of tree nodes.
The code of the main page MainExplorer.xhtml is:
<?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:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>XX</title>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" header="Top" resizable="true" closable="false" collapsible="true">
<h:outputText value="Top unit content." />
</p:layoutUnit>
<p:layoutUnit position="south" size="100" header="Bottom" resizable="true" closable="false" collapsible="true">
<h:outputText value="South unit content." />
</p:layoutUnit>
<p:layoutUnit position="west" size="150" header="Left" resizable="true" closable="false" collapsible="true">
<h:form id="form" style="width: 150;" >
<p:growl id="messages" showDetail="true" />
<p:tree value="#{treeBean.root}" var="node" dynamic="true" cache="false" selectionMode="single" selection="#{treeBean.selectedNode}">
<p:ajax event="expand" update=":form:messages" listener="#{treeBean.onNodeExpand}" />
<p:ajax event="collapse" update=":form:messages" listener="#{treeBean.onNodeCollapse}" />
<p:ajax event="select" update=":form:messages" listener="#{treeBean.onNodeSelect}" />
<p:ajax event="unselect" update=":form:messages" listener="#{treeBean.onNodeUnselect}" />
<p:treeNode><h:outputText value="#{node}" /></p:treeNode>
</p:tree>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" header="Welcome : user name" resizable="true" closable="true" collapsible="true">
</p:layoutUnit>
</p:layout>
</h:body>
</html>
I want to open a new page or (of?) diff-diff data tables on click of tree event.
E.g. CallListPage.xhtml. I want to open this page in center layout. There may be a number of pages open in center layout.
<?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:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>XX</title>
</h:head>
<h:body>
<h:form id="usr1" title="Call List">
<p:growl id="growl" showDetail="true"/>
<p:dataTable var="callRow"
value="#{callList.callDataModel}"
rowKey="#{callRow.contspecs}"
selection="#{callList.advCallMstrSelected}" selectionMode="single"
paginator="true" rows="5"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
>
<p:ajax event="rowSelect" listener="#{callList.onRowSelect}" update=":usr1:display :usr1:growl" oncomplete="callDialog.show()" />
<p:ajax event="rowUnselect" listener="#{callList.onRowUnselect}" update=":usr1:growl"/>
<p:column><f:facet name="header">Specification</f:facet><h:outputText value="#{callRow.contspecs}"/></p:column>
<p:column><f:facet name="header">Exchange</f:facet><h:outputText value="#{callRow.exchange}"/></p:column>
<p:column><f:facet name="header">Symbol</f:facet><h:outputText value="#{callRow.symbol}"/></p:column>
<p:column><f:facet name="header">Call</f:facet><h:outputText value="#{callRow.call_type}"/></p:column>
<p:column><f:facet name="header">Trigger</f:facet><h:outputText value="#{callRow.trigger_price}"/></p:column>
<p:column><f:facet name="header">CMP</f:facet><h:outputText value="#{callRow.ltp}"/></p:column>
<p:column><f:facet name="header">SL</f:facet><h:outputText value="#{callRow.sl_price}"/></p:column>
<p:column><f:facet name="header">1st Tgt.</f:facet><h:outputText value="#{callRow.tg_1}"/></p:column>
<p:column><f:facet name="header">2nd Tgt.</f:facet><h:outputText value="#{callRow.tg_2}"/></p:column>
<p:column><f:facet name="header">3rd Tgt.</f:facet><h:outputText value="#{callRow.tg_3}"/></p:column>
<p:column><f:facet name="header">4th Tgt.</f:facet><h:outputText value="#{callRow.tg_4}"/></p:column>
<p:column><f:facet name="header">Status</f:facet><h:outputText value="#{callRow.call_status}"/></p:column>
<p:column><f:facet name="header">Call By</f:facet><h:outputText value="#{callRow.makerid}"/></p:column>
<f:facet name="footer">
<p:commandButton value="View" update="usr1:display" oncomplete="carDialog.show()"/>
</f:facet>
</p:dataTable>
<p:dialog header="Call Detail" widgetVar="callDialog" resizable="false" modal="true"
showEffect="explode" hideEffect="explode">
<h:panelGrid id="display" columns="2" cellpadding="4">
<h:outputText value="exchange" />
<h:outputText value="#{callList.advCallMstrSelected.exchange}" />
<h:outputText value="Valid Upto:" />
<h:outputText value="#{callList.advCallMstrSelected.valid_upto}" />
<h:outputText value="Offer at:" />
<h:outputText value="#{callList.advCallMstrSelected.call_price1}" />
<h:outputText value="Call Entry Time:" />
<h:outputText value="#{callList.advCallMstrSelected.call_entrytime}" />
<h:outputText value="Message Time:" />
<h:outputText value="#{callList.advCallMstrSelected.msg_genration_time}" />
<h:outputText value="1st Target Hit Time :" />
<h:outputText value="#{callList.advCallMstrSelected.tg_1_hit_time}" />
<h:outputText value="2nd Target Hit Time :" />
<h:outputText value="#{callList.advCallMstrSelected.tg_2_hit_time}" />
<h:outputText value="3rd Target Hit Time :" />
<h:outputText value="#{callList.advCallMstrSelected.tg_3_hit_time}" />
<h:outputText value="4th Target Hit Time :" />
<h:outputText value="#{callList.advCallMstrSelected.tg_4_hit_time}" />
<h:outputText value="Stop Loss Hit Time :" />
<h:outputText value="#{callList.advCallMstrSelected.sl_hit_time}" />
<h:outputText value="Call finish Time:" />
<h:outputText value="#{callList.advCallMstrSelected.call_close_time}" />
<h:outputText value="SMS to:" />
<h:outputText value="#{callList.advCallMstrSelected.sms_to_group}" />
<h:outputText value="Message Group:" />
<h:outputText value="#{callList.advCallMstrSelected.messagegroup}" />
<h:outputText value="SubScriber's Group:" />
<h:outputText value="#{callList.advCallMstrSelected.subscribersgroup}" />
<h:outputText value="Message Remarks:" />
<h:outputText value="#{callList.advCallMstrSelected.msg_remarks}" />
</h:panelGrid>
</p:dialog>
</h:form>
</h:body>
</html>
How can I open this?

Done by changing the line!!
old code
<p:ajax event="select" update=":form:messages" listener="#{treeBean.onNodeSelect}" />
<p:ajax event="unselect" update=":form:messages" listener="#{treeBean.onNodeUnselect}" />
new code
<p:ajax event="select" update=":formCenter:panelGroupCenter" listener="#{treeBean.onNodeSelect}" />
<p:ajax event="unselect" update=":formCenter:panelGroupCenter" listener="#{treeBean.onNodeUnselect}" />
for center layout use this :
<p:layoutUnit id="cent" position="center" header="Welcome : user name"
resizable="true" closable="true" collapsible="true">
<h:form id="formCenter" style="text-align: center" >
<h:panelGroup id="panelGroupCenter">
<ui:include src="#{treeBean.openPage}.xhtml" />
</h:panelGroup>
</h:form>
</p:layoutUnit>

Develop Reference

node.js excel linux python-3.x azure haskell apache-spark rust .htaccess string

primefaces dynamic navigation not working properly - jsf

i find it the problem was modal="true" in the dialog

Related

PrimeFaces Tabview 2nd tab not displaying - conditionally [duplicate]

Resizing a p:ring

My p:dialog is never called

p:dataTable never refreshes after a delete, update or insert

Load diff-diff data tables in center layout with tree event

Categories

Resources