im using:
JSF 2.1
RichFaces 4.5.2.Final
Omnifaces 2.0
I have a Table that i want to reuse as datable or subtable depends of the page that i use the component, i want to put and if but it doesnt work, here is my 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:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:o="http://omnifaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:tablas="http://java.sun.com/jsf/composite/tablas"
>
<!-- INTERFACE -->
<composite:interface>
<composite:attribute name="listaPaqueteItems" required="true" />
<composite:attribute name="subtable" required="false" default="false" />
</composite:interface>
<!-- IMPLEMENTATION -->
<composite:implementation>
<c:if test="#{!cc.attrs.subtable}">
<rich:dataTable id="tabla_items_del_paquete"
value="#{cc.attrs.listaPaqueteItems}"
var="p"
rowKeyVar="row_tabla_items_del_paquete"
rows="10"
rowClasses="odd-row, even-row"
styleClass="stable">
</c:if>
<c:if test="#{cc.attrs.subtable}">
<rich:collapsibleSubTable id="subtable">
</c:if>
<rich:column>
<f:facet name="header">
<h:outputText value="#" />
</f:facet>
<h:outputText value="#{row_tabla_items_del_paquete + 1}" />
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="#{msgs['abm.paquete.item.tabla.codigo']}" />
</f:facet>
<h:outputText value="#{p.producto.codigo}" />
</rich:column>
<rich:column colspan="2">
<f:facet name="header">
<h:outputText value="#{msgs['abm.paquete.item.tabla.nombre']}" />
</f:facet>
<b>
<h:outputText value="#{p.producto.nombre}" />
</b>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="#{msgs['abm.paquete.item.tabla.descuento.final']}" />
</f:facet>
<h:outputText value="#{p.descuentoFinal}" />
</rich:column>
<c:if test="#{!cc.attrs.subtable}">
</rich:dataTable>
</c:if>
<c:if test="#{cc.attrs.subtable}">
</rich:collapsibleSubTable>
</c:if>
</composite:implementation>
</html>
Basically the problem is that isnt valid XHTML, any idea to accomplish this scenario and try to reuse this code as table or subtable, one possible idea is externally the <rich:colum> tags in another template and wrapper that in datable or subtable something like this:
<rich:collapsibleSubTable
expanded="#{false}"
id="tabla_periodos"
rowKeyVar="row_subtable"
expandMode="client"
value="#{p.periodoDescuentos}"
var="per"
rendered="#{not empty p.periodoDescuentos}"
>
<!-- Include Columns-->
</rich:collapsibleSubTable>
I think that will work but maybe is another way to do the same better.
You can create facelet tag with following code:
TAG (myTable.xhtml):
<c:if test="#{!subtable}">
<rich:dataTable id="tabla_items_del_paquete"
value="#{listaPaqueteItems}"
var="p"
rowKeyVar="row_tabla_items_del_paquete"
rows="10"
rowClasses="odd-row, even-row"
styleClass="stable">
<ui:insert>
</rich:dataTable>
</c:if>
<c:if test="#{subtable}">
<rich:collapsibleSubTable id="subtable">
<ui:insert>
</rich:collapsibleSubTable>
</c:if>
USAGE:
<my:mytable>
... your dataTable content
</my:mytable>
Related
I'm working on a JSF project, all is working fine for the moment except for one thing: when I select a page from the left side bar, it is loaded correctly, when I click on a button, the button stays pressed but the action is not called.
button pressed but no action called
When I refresh the page and press it again, it works fine.
This happens to the other pages too.
Do you have any idea why is this happening ?!
I'm here to provide more details if needed!
The managed bean name and scope:
#ManagedBean(name="ModerateurBean")
#SessionScoped
The code of one of my pages:
<ui:composition template="template/default/main.xhtml"
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"
xmlns:b="http://bootsfaces.net/ui"
>
<ui:define name="content">
<div class="container-fluid">
<div class="row">
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h:form id="form">
<p:growl id="msgs" showDetail="true" />
<p:commandButton process="singleDT" update=":form:ajouter" icon="ui-icon-plus" value="Ajouter" oncomplete="PF('ajouterDialog').show()" />
<p:dataTable id="singleDT" var="o" value="#{ModerateurBean.listMod}" selectionMode="single" selection="#{ModerateurBean.selectedModerateur}" rowKey="#{o.id_personne}" valueChangeListener="#{ModerateurBean.valChanged}" onchange="submit()">
<p:column headerText="Nom ">
<h:outputText value="#{o.nom}" />
</p:column>
<p:column headerText="Prénom ">
<h:outputText value="#{o.prenom}" />
</p:column>
<p:column headerText="Cin ">
<h:outputText value="#{o.cin}" />
</p:column>
<p:column headerText="Adresse ">
<h:outputText value="#{o.adresse}" />
</p:column>
<p:column headerText="Numéro Téléphone ">
<h:outputText value="#{o.numtel}" />
</p:column>
</p:dataTable>
<p:commandButton process="singleDT" update=":form:voir" icon="ui-icon-search" value="Voir" oncomplete="PF('voirDialog').show()" />
<p:commandButton process="singleDT" update=":form:modifier" icon="ui-icon-pencil" value="Modifier" oncomplete="PF('modifierDialog').show()" />
<p:commandButton process="singleDT" update=":form:supprimer" icon="ui-icon-trash" value="Supprimer" oncomplete="PF('supprimerDialog').show()" />
<!-- dialog voir admin -->
<p:dialog header="Details administrateur" widgetVar="voirDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="voir" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty ModerateurBean.selectedModerateur}" columnClasses="label,value">
<h:outputText value="Nom" style="color:black"/>
<h:outputText value="#{ModerateurBean.selectedModerateur.nom}" />
<h:outputText value="Prénom " style="color:black" />
<h:outputText value="#{ModerateurBean.selectedModerateur.prenom}" />
<h:outputText value="Cin " style="color:black" />
<h:outputText value="#{ModerateurBean.selectedModerateur.cin}" />
<h:outputText value="Adresse " style="color:black" />
<h:outputText value="#{ModerateurBean.selectedModerateur.adresse}" />
<h:outputText value="Numéro Téléphone " style="color:black"/>
<h:outputText value="#{ModerateurBean.selectedModerateur.numtel}" />
</p:panelGrid>
</p:outputPanel>
</p:dialog>
<!-- dialog modifier moderateur -->
<p:dialog header="Modifier moderateur" widgetVar="modifierDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="modifier" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty ModerateurBean.selectedModerateur}" columnClasses="label,value">
<h:outputText value="Nom" style="color:black" />
<p:inputText value="#{ModerateurBean.selectedModerateur.nom}" />
<h:outputText value="Prénom " style="color:black" />
<p:inputText value="#{ModerateurBean.selectedModerateur.prenom}" />
<h:outputText value="Cin " style="color:black"/>
<p:inputText value="#{ModerateurBean.selectedModerateur.cin}" />
<h:outputText value="Adresse " style="color:black" />
<p:inputTextarea rows="6" cols="33" value="#{ModerateurBean.selectedModerateur.adresse}"/>
<h:outputText value="Numéro Téléphone " style="color:black" />
<p:inputMask id="phoneWithExt18" value="#{ModerateurBean.selectedModerateur.numtel}" mask="(999) 999-9999? x99999"/>
</p:panelGrid>
</p:outputPanel>
<p:commandButton action="#{ModerateurBean.ModifierModerateur}" icon="ui-icon-pencil" value="Modifier" update="#form" />
<p:commandButton process="singleDT" update="#form" icon="ui-icon-cancel" value="Annuler" oncomplete="PF('modifierDialog').hide()" />
</p:dialog>
<!-- dialog ajouter moderateur -->
<p:dialog header="Ajouter moderateur" widgetVar="ajouterDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="ajouter" style="text-align:center;">
<p:panelGrid columns="2" columnClasses="label,value">
<h:outputText value="Nom" style="color:black" />
<p:inputText value="#{ModerateurBean.nom}" />
<h:outputText value="Prénom " style="color:black" />
<p:inputText value="#{ModerateurBean.prenom}" />
<h:outputText value="Sexe " for="sexe" style="color:black" />
<p:selectOneMenu id="sexe" value="#{ModerateurBean.sexe}">
<f:selectItem itemValue="" itemLabel=" --selectionnez-- "></f:selectItem>
<f:selectItem itemValue="1" itemLabel="Homme"></f:selectItem>
<f:selectItem itemValue="2" itemLabel="Femme"></f:selectItem>
</p:selectOneMenu>
<h:outputText value="Cin " style="color:black" />
<p:inputText value="#{ModerateurBean.cin}" />
<h:outputText value="Adresse " style="color:black"/>
<p:inputTextarea rows="6" cols="33" vvalue="#{ModerateurBean.adresse}"/>
<h:outputText value="Numéro Téléphone " style="color:black" />
<p:inputMask id="phoneWithExt1" value="#{ModerateurBean.numtel}" mask="(999) 999-9999? x99999"/>
</p:panelGrid>
</p:outputPanel>
<p:commandButton update="#form" icon="ui-icon-check" value="Sauvegarder" action="#{ModerateurBean.AjouterModerateur}" oncomplete="PF('ajouterDialog').hide()" >
<f:ajax render="singleDT" update="#form"/></p:commandButton>
<p:commandButton process="singleDT" update="#form" icon="ui-icon-cancel" value="Annuler" oncomplete="PF('ajouterDialog').hide()" />
</p:dialog>
<!-- dialog supprimer moderateur -->
<p:dialog header="Supprimer moderateur" widgetVar="supprimerDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="supprimer" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty ModerateurBean.selectedModerateur}" columnClasses="label,value">
<h:outputText value="Id " style="color:black"/>
<h:outputText value="#{ModerateurBean.selectedModerateur.id_personne}" />
<h:outputText value="Nom" style="color:black"/>
<h:outputText value="#{ModerateurBean.selectedModerateur.nom}" />
<h:outputText value="Prénom " style="color:black"/>
<h:outputText value="#{ModerateurBean.selectedModerateur.prenom}" />
</p:panelGrid>
</p:outputPanel>
<p:commandButton value="Supprimer" action="#{ModerateurBean.SupprimerModerateur}" icon="ui-icon-trash" oncomplete="PF('supprimerDialog').hide()" update="#form" >
<p:commandButton process="singleDT" update="#form" icon="ui-icon-cancel" value="Annuler" oncomplete="PF('supprimerDialog').hide()" />
<p:confirm header="Confirmation" message="Etes vous sur?" icon="ui-icon-alert" />
</p:commandButton>
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
<p:commandButton value="Oui" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="Non" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
</p:dialog>
</h:form>
</div>
</div>
</div>
</ui:define>
</ui:composition>
The images : image 1
image 2
image 3
image 4 : When i click on a button
Resume of the problem :
My problem was that when i click on a button it stays pressed but when i refresh the page it starts working normaly.
The solution :
i am working with facelets, so i have a template as you can see it here template structure
In main.xhtml i gather them and define styesheets and scripts in the head section, i work also with primefaces 6.x.
After i investagated in the console of Chrome Console of Chrome , the googlable errors stated that the probleme was in the conflict between primefaces and jquery that i manualy added.
what i did is remove all the jquery scripts and it started working again.
see the diffrence in the two codes :
main.xhtml (before)
<?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:b="http://bootsfaces.net/ui">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>App Gestion d'Absence</title>
</f:facet>
<f:facet name="middle">
<h:outputStylesheet name="bootstrap/css/bootstrap.css" />
<h:outputStylesheet name="bootstrap/css/bootstrap.min.css" />
<h:outputStylesheet name="css/dashboard.css" />
<h:outputStylesheet name="metisMenu/metisMenu.min.css" />
<h:outputStylesheet name="bootstrap/css/sb-admin-2.css" />
<h:outputStylesheet name="morrisjs/morris.css" />
<h:outputStylesheet name="morrisjs/morris.min.js" />
<h:outputStylesheet name="morrisjs/morris.js" />
<h:outputStylesheet name="font-awesome/css/font-awesome.css" />
<h:outputStylesheet name="font-awesome/css/font-awesome.min.css" />
<h:outputStylesheet name="vendor/morrisjs/morris.css"/>
<!-- <h:outputStylesheet name="webjars/font-awesome/4.4.0/css/font-awesome.css"> -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></link>
<!-- jQuery -->
<h:outputScript library="bootstrap" name="bootstrap.js" />
<h:outputScript library="bootstrap" name="bootstrap.min.js" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h:outputScript library="js" name="sb-admin-2.js" />
<h:outputScript library="js" name="sb-admin-2.min.js" />
</f:facet>
<f:facet name="last">
</f:facet>
</h:head>
<h:body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="header">
<ui:insert name="header">
<ui:include src="header.xhtml"/>
</ui:insert>
</div>
<div id="leftMenu">
<ui:insert name="leftMenu">
<ui:include src="leftMenu.xhtml"/>
</ui:insert>
</div>
<div id="content">
<ui:insert name="content">
<!-- <div>
<ui:include src="content.xhtml"/>
</div> -->
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer">
<ui:include src="footer.xhtml"/>
</ui:insert>
</div>
</h:body>
</html>
main.xhtml (after)
<?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:b="http://bootsfaces.net/ui">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Gestion Absence ISMO</title>
</f:facet>
<link rel="shortcut icon" href="#{resources['images/favicon.ico']}" type="image/x-icon" />
<f:facet name="middle">
<h:outputStylesheet name="bootstrap/css/bootstrap.css" />
<h:outputStylesheet name="css/dashboard.css" />
<h:outputStylesheet name="bootstrap/css/sb-admin-2.css" />
<h:outputStylesheet name="font-awesome/css/font-awesome.css" />
<h:outputStylesheet name="font-awesome/css/font-awesome.min.css" />
<!-- <h:outputStylesheet name="webjars/font-awesome/4.4.0/css/font-awesome.css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" />
<h:outputScript name="bootstrap/js/bootstrap.js" />
</f:facet>
<f:facet name="last">
</f:facet>
</h:head>
<h:body>
<div id="header">
<ui:insert name="header">
<ui:include src="header.xhtml"/>
</ui:insert>
</div>
<div id="leftMenu">
<ui:insert name="leftMenu">
<ui:include src="leftMenu.xhtml"/>
</ui:insert>
</div>
<div id="content">
<ui:insert name="content">
<!-- <div>
<ui:include src="content.xhtml"/>
</div> -->
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer">
<ui:include src="footer.xhtml"/>
</ui:insert>
</div>
</h:body>
</html>
i hope this will help someone :)
I am trying to export a data table to excel using primefaces 5.1, poi 3.9. My xhtml code 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:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<h:outputStylesheet library="css" name="custom.css" />
<h:outputScript library="js" name="customjs.js" />
</h:head>
<h:body>
<h:form id="form">
<h:form>
<p:dataTable id="tbl" var="tempEmployeeInOut"
value="#{tempInOut.tempEmployeeInOuts}"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {Exporters}"
paginator="true" rows="10" style="margin-bottom:20px">
<f:facet name="{Exporters}">
<h:commandLink>
<p:graphicImage library="images" name="excel.png" width="24" />
<p:dataExporter type="xls" target="tbl" fileName="tempEmployeeInOut" />
</h:commandLink>
<h:commandLink>
<p:graphicImage library="images" name="pdf.png" width="24" />
<p:dataExporter type="pdf" target="tbl" fileName="tempEmployeeInOut" />
</h:commandLink>
<h:commandLink>
<p:graphicImage library="images" name="csv.png" width="24" />
<p:dataExporter type="csv" target="tbl" fileName="tempEmployeeInOut" />
</h:commandLink>
<h:commandLink>
<p:graphicImage library="images" name="xml.png" width="24" />
<p:dataExporter type="xml" target="tbl" fileName="tempEmployeeInOut" />
</h:commandLink>
</f:facet>
<p:column>
<f:facet name="header">
<h:outputText value="Employee Id" />
</f:facet>
<h:outputText value="#{tempEmployeeInOut.empID}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Name" />
</f:facet>
<h:outputText value="#{tempEmployeeInOut.name}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Entry Date" />
</f:facet>
<h:outputText value="#{tempEmployeeInOut.entryDate}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Morning In Time" />
</f:facet>
<h:outputText value="#{tempEmployeeInOut.morInTime}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Lunch Out Time" />
</f:facet>
<h:outputText value="#{tempEmployeeInOut.lunchOutTime}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Lunch In Time" />
</f:facet>
<h:outputText value="#{tempEmployeeInOut.lunchInTime}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="OutTime" />
</f:facet>
<h:outputText value="#{tempEmployeeInOut.outTime}" />
</p:column>
</p:dataTable>
<h3>Export Page Data Only</h3>
<h:commandLink>
<p:graphicImage library="images" name="excel.png" />
<p:dataExporter type="xls" target="tbl" fileName="cars"
pageOnly="true" />
</h:commandLink>
<h:commandLink>
<p:graphicImage library="images" name="pdf.png" />
<p:dataExporter type="pdf" target="tbl" fileName="cars"
pageOnly="true" />
</h:commandLink>
<h:commandLink>
<p:graphicImage library="images" name="csv.png" />
<p:dataExporter type="csv" target="tbl" fileName="cars"
pageOnly="true" />
</h:commandLink>
<h:commandLink>
<p:graphicImage library="images" name="xml.png" />
<p:dataExporter type="xml" target="tbl" fileName="cars"
pageOnly="true" />
</h:commandLink>
</h:form>
</h:form>
</h:body>
</html>
I have nothing special in my TempInOut class. I am able to display my data into the data table. But when I am clicking the export to excel icon or any other icon, nothing is happening except the url have one # appended. I searched at many places but mostly there were version issue. I am not able understand where I am doing wrong.
my data table looks something like this.
Did you add Apache POI dependecies?
If not,
you download the latest stable version from Apache POI download page, extract downloaded file, put library in /WEB-INF/lib folder and re-run webapp on server.
Or if you're using Maven, copy and paste this dependecies on you pom.xml:
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi</artifactId>
<version>3.10-FINAL</version>
</dependency>
Please tell me, how to put the filter outside of the tag
I make so:
<ui:composition 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">
<h:form id="InventListForm">
<p:panel header="#{myBundle.ListInventTitle}">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search: " />
<p:inputText id="globalFilter" onkeyup="InventList.filter()" style="width:150px" />
</p:outputPanel>
</f:facet>
<p:dataTable id="datalist" resizableColumns="true" value="#{inventController.items}" var="item"
widgetVar="InventList" selectionMode="single" selection="#{inventController.selected}"
rowKey="#{item.id}"
paginator="true"
rows="10"
rowsPerPageTemplate="10,20,30"
>
<p:ajax event="rowSelect" update="createButton viewButton editButton deleteButton"/>
<p:ajax event="rowUnselect" update="createButton viewButton editButton deleteButton"/>
but the filter does not work
Table I generated by the Primefaces CRUD generator
I am using Primefaces3.5 with Jsf2.1.9 i am getting a weired issue with
<p:commandButton>
as well as
<p:commandLink>
I have to press button as well as link more than one then JSF bean method is calling otherwise on Single click nothing Happening as i read some Stackoverflow Question this Issue relates to JSF but even using Primfaces3.5 with their Components i am getting this issue.Any one know How can i resolve this issue.
My JSF page
<ui:composition xmlns:jsp="http://java.sun.com/JSP/Page"
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:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui"
template="./../portfolio/PortfolioViewTemplate.xhtml">
<ui:define name="moduleContent">
<p:panel id="panel" header="Portfolio Transaction">
<p:messages id="msgs" />
<p:panelGrid id="addMoreTrans" columns="2" style="border-style:none;">
<f:facet name="header">
Add Trades
</f:facet>
<p:dataTable var="moreTrans"
value="#{portfolioTransactionBean.listOfTrasPanel}" style="border:none;" >
<p:column style="border:none;">
<p:panelGrid columns="7" id="transactionPanel1"
style="display: inline-block;border:none;">
<h:outputLabel for="tipsSuggestionBoxId" value="Company Name:*"></h:outputLabel>
<h:outputText value="Date:*" />
<h:outputText value="Type:*" />
<h:outputText value="Quantity:*" />
<h:outputText value="Price:*" />
<h:outputText value="Brokerage:" />
<h:outputText value="Notes:" />
<p:autoComplete id="tipsSuggestionBoxId"
completeMethod="#{applicationScopeBean.autoSelectCompany}"
value="#{portfolioTransactionBean.txnCurrentRecord.companyName}"
minChars="3" nothingLabel="No similar company found"
requestDelay="1" minQueryLength="3" required="true"
requiredMessage="Company Name Cannot be empty">
</p:autoComplete>
<p:calendar id="from_date1" size="10" required="true"
requiredMessage="Date Cannot be empty"
value="#{portfolioTransactionBean.txnCurrentRecord.umptTransDate}"
mode="popup" showOn="both" pattern="dd/MM/yyyy"
popupIconOnly="true" readonly="#{facesContext.renderResponse}"
navigator="true" showButtonPanel="true">
</p:calendar>
<p:selectOneMenu id="tranType"
value="#{portfolioTransactionBean.txnCurrentRecord.umptTransType}">
<f:selectItem itemLabel="Transaction Type" itemValue="" />
<f:selectItem itemLabel="Buy" itemValue="Buy" />
<f:selectItem itemLabel="Sell" itemValue="Sell" />
<f:selectItem itemLabel="Bonus" itemValue="Bonus" />
<f:selectItem itemLabel="Split" itemValue="Split" />
</p:selectOneMenu>
<p:spinner id="transQuntity1" required="true"
value="#{portfolioTransactionBean.txnCurrentRecord.umptQty}"
min="1" label="Quanity" size="5"
validatorMessage="Field Is mandatory" />
<p:spinner id="transPrice1" required="true" size="5"
value="#{portfolioTransactionBean.txnCurrentRecord.umptPrice}"
label="Price" validatorMessage="Field Is mandatory" />
<p:spinner id="brokerage1" size="5"
value="#{portfolioTransactionBean.txnCurrentRecord.umptBrokerage}" />
<h:inputText
value="#{portfolioTransactionBean.txnCurrentRecord.umptNotes}" />
</p:panelGrid>
<p:separator id="customSeparator" style="width:100%;height:10px" />
</p:column>
</p:dataTable>
<f:facet name="footer">
<p:commandButton value="Clear"
actionListener="#{portfolioTransactionBean.clearRecord}"
process="#this"
rendered="#{portfolioTransactionBean.onClickofButton}">
</p:commandButton>
<p:spacer width="100" height="10" />
<p:commandButton value="Save Transaction " icon="ui-icon-check"
action="#{portfolioTransactionBean.savePortfolioTransaction}"
style="float:right;right:20%;"
rendered="#{portfolioTransactionBean.onClickofButton}">
</p:commandButton>
<p:commandButton value="Add More Transaction " icon="ui-icon-check"
action="#{portfolioTransactionBean.addMoreTransPanel}"
process="#this" update="addMoreTrans"
rendered="#{portfolioTransactionBean.onClickofButton}" />
</f:facet>
</p:panelGrid>
<p:panelGrid columns="2" id="allTransactionPanel">
<p:dataTable value="#{portfolioTransactionBean.transactionsList}"
var="tradeRec">
<f:facet name="Header">
<h:outputText>Recently Added Trades</h:outputText>
</f:facet>
<p:column headerText="Company">
<h:outputText value="#{tradeRec.companyName}"></h:outputText>
</p:column>
<p:column headerText="Date">
<h:outputText value="#{tradeRec.umptTransDate}">
<f:convertDateTime dateStyle="medium"></f:convertDateTime>
</h:outputText>
</p:column>
<p:column headerText="Type">
<h:outputText value="#{tradeRec.umptTransType}"></h:outputText>
</p:column>
<p:column headerText="Quantity">
<h:outputText value="#{tradeRec.umptQty}"></h:outputText>
</p:column>
<p:column headerText="Price">
<h:outputText value="#{tradeRec.umptPrice}">
<f:convertNumber maxFractionDigits="2"></f:convertNumber>
</h:outputText>
</p:column>
<p:column headerText="Brokerage">
<h:outputText value="#{tradeRec.umptBrokerage}">
<f:convertNumber maxFractionDigits="2"></f:convertNumber>
</h:outputText>
</p:column>
</p:dataTable>
</p:panelGrid>
</p:panel>
</ui:define>
</ui:composition>
Template File...
<ui:composition xmlns:jsp="http://java.sun.com/JSP/Page"
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:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui"
template="./../templates/MasterTemplate.xhtml">
<ui:define name="moduleDetails">
<h:form name="portfolioMenuForm">
<f:event type="javax.faces.event.PreRenderViewEvent" listener="#{applicationScopeBean.preRenderView}"/>
<table style="width: 100%; min-height: 500px; border: none">
<tr>
<td>
<p:menu>
<p:submenu label="Portfolio Views">
<p:menuitem value="Add Transactions" action="PortfolioTransactionMgmt" update="#form" immediate="true" />
<p:menuitem value="View Transactions" action="PortFolioTranView" update="#form" immediate="true" />
<p:menuitem value="Latest Holdings" action="PortfolioHolding" update="#form" immediate="true" />
<p:menuitem value="Sector Allocations" action="#{portfolioTransactionBean.showSecAllocation}" update="#form" immediate="true" />
<p:menuitem value="Realized Profit" action="PortfolioRelizeProfit" update="#form" immediate="true" />
<p:menuitem value="Portfolio Performance" action="#{portfolioTransactionBean.showPortPerformance}" update="#form" immediate="true" />
<p:menuitem value="Benchmark Comparison" action="#{portfolioTransactionBean.showBenhComparison}" update="#form" immediate="true" />
</p:submenu>
</p:menu>
</td>
<td>
<ui:insert name="moduleContent"></ui:insert>
</td>
</tr>
</table>
</h:form>
</ui:define>
</ui:composition>
Basically this is not weired issue
On first click jsf first looks whether there is (javax.faces.ViewState) state available or not and if it is not available then it creates one for you & when you click second time because of Jsf state available it makes call to bean method.
Solution : try creating jsf state through the javascript function
Thanks to Çağatay Çivici Project lead of primefaces .He suggest me
Try with 2.1.17 then, showcase is 2.1.17.
So i updated my pom for jsf and it work like a charm.
Thanks
I am Using
WebSphere Application Server 7.0.0.25,
Myfaces 2.0.7,
Primefaces 3.4.1
I have the following page which is using p:tabView has 3 tabs
dashboard.xhtml
Dashboard is main page which has header.xhtml. and first tab has 4 radio buttons. on clicking of each radio button would load different code piece written in ui:composite using AJAX.
Second tabs has some buttons in footer of the p:dataTable. When I click on the button a dialog will show up the selected row in the datatable.
I see the following error in server logs.
Error Rendering View[/dashboard.xhtml]
javax.faces.FacesException: Cannot find component with identifier ":tabView:panelGridNewUserDialog" referenced from "tabView:userList:addUserButton".
But when I see "View Source" in browser, HTML code is incomplete. I have put the p:dialog tags bottom of the AppUserManagement.xhtml. All that code is not rendered as HTML. And commandButton is not showing in dataTable footer
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<c:set var="webCtxRoot" value="#{request.contextPath}" />
<f:view locale="#{language.locale}">
<h:head>
<link rel="stylesheet" type="text/css"
href="#{webCtxRoot}/theme/ldapmanager.css" />
<title>Welcome To Ldap Manager Application</title>
<h:outputScript name="jsf.js" library="javax.faces" id="script_id" />
</h:head>
<h:body>
<h:form id="headerForm" prependId="false">
<h:inputHidden value="#{authenticatedBackingBean.session}"
id="sessionValidator" />
<ui:include src="header.xhtml" />
<p:spacer height="8" width="160" />
<p:tabView id="tabView" dynamic="true" cache="true">
<p:tab id="applicationUserManagementTab"
title="Application User Mgmt">
<ui:include src="AppUserManagement.xhtml" />
</p:tab>
<p:tab id="userManagementTab" title="User Management">
<p:panelGrid id="dashboardContentGrid" styleClass="panelDiv">
<p:row>
<p:column>
<p:panelGrid>
<p:row>
<p:column>
<p:fieldset legend="Choose User Operation" id="buttonPanel">
<p:selectOneRadio id="userOperationType"
value="#{userAct.userAction}">
<f:selectItem id="newUser" itemLabel="New User"
itemValue="UMNewUser" />
<f:selectItem id="modifyUser" itemLabel="Modify User"
itemValue="UMModifyUser" />
<f:selectItem id="deleteUser" itemLabel="Delete User"
itemValue="UMDeleteUser" />
<f:selectItem id="modifyPassword"
itemLabel="Change / Reset Password"
itemValue="UMModifyPassword" />
<p:ajax update="ContentPanel"
listener="#{userAct.returnSelectedValue}" />
</p:selectOneRadio>
</p:fieldset>
</p:column>
</p:row>
<p:row>
<p:column>
<p:growl id="growl" showDetail="true" life="20000"
autoUpdate="true" />
<p:outputPanel id="ContentPanel" layout="block">
<ui:include src="#{userAct.userAction}.xhtml" />
</p:outputPanel>
</p:column>
</p:row>
</p:panelGrid>
</p:column>
<p:column>
<p:outputPanel id="helpPanel">
<p:inputTextarea id="helpWindow" rows="18" cols="80"
value="Move your mouse over various fields for instant help" />
</p:outputPanel>
</p:column>
</p:row>
</p:panelGrid>
</p:tab>
<p:tab id="userGroupManagementTab" title="User Group Mgmt">
</p:tab>
</p:tabView>
</h:form>
</h:body>
</f:view>
</html>
header.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<p:panelGrid id="pnlgLocaleChange" border="0">
<p:row>
<p:column rowspan="2">
<p:graphicImage value="images/TelenorLogoWhite.png" />
</p:column>
<p:column colspan="3" style="width:16%">
<h:outputText id="ApplicationBanner" class="bannerLabel"
value="#{msgs.title}" />
<h:outputText id="ApplicationVersion" value="#{msgs.Version} #{UsersBean.releaseLabel}" class="ApplicationVersion"/>
</p:column>
</p:row>
<p:row>
<p:column styleClass="LoginBannerLocale" style="padding-right: 0px !important;">
<h:outputText id="languageLabel" value="#{msgs.locale}" />
</p:column>
<p:column style="width:5%;">
<p:selectOneMenu value="#{language.locale}" styleClass="localeSelectClass">
<f:selectItems value="#{language.countries}" />
<p:ajax update="#form" />
</p:selectOneMenu>
</p:column>
</p:row>
<p:row rendered="#{not empty request.remoteUser}">
<!-- <p:column styleClass="HeaderWelcomeMsg" >
<h:outputText value="#{msgs.Welcome}, #{authenticatedBackingBean.userFullName}" style="float:middle !important; "/>
</p:column> -->
<p:column styleClass="LoginBannerLocale" colspan="2">
<h:outputText id="loggedInUser" value="#{msgs.loginUserMessage} #{request.remoteUser } (#{authenticatedBackingBean.roleDescription})| " />
<h:commandLink value=" #{msgs.Logout}" onclick="document.getElementById('headerForm').action='ibm_security_logout?logoutExitPage=/Login.xhtml';" />
</p:column>
</p:row>
</p:panelGrid>
</ui:composition>
AppUserManagement.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<p:fieldset id="fieldAppUserMgmt">
<p:panelGrid id="filterUsers" style="width:100%;">
<p:row>
<p:column style="left: 40%;">
<h:outputText id="applicationNameLabel" value="#{msgs.AppUserMgmt_AppName_Label}" />
<p:selectOneMenu value="#{AppUserManagementBean.applicationName}" styleClass="localeSelectClass" id="applicationName">
<f:selectItem itemLabel="Select One" itemValue="-1" />
<f:selectItems value="#{AppUserManagementBean.systemDetails}" />
<p:ajax update="groupName,userList" listener="#{AppUserManagementBean.loadGroupDetails}" />
</p:selectOneMenu>
</p:column>
</p:row>
<p:row>
<p:column style="left: 40%;">
<h:outputText id="groupNameLabel" value="#{msgs.AppUserMgmt_AppGroup_Label}" />
<p:selectOneMenu value="#{AppUserManagementBean.groupName}" styleClass="localeSelectClass" id="groupName">
<f:selectItem itemLabel="Select One" itemValue="-1" />
<f:selectItems value="#{AppUserManagementBean.groupDetails}" />
<p:ajax update="userList" listener="#{AppUserManagementBean.loadUserDetails}" />
</p:selectOneMenu>
</p:column>
</p:row>
<p:row>
<p:column>
<p:dataTable id="userList" var="user" value="#{AppUserManagementBean.lstUsrDetails}"
paginatorAlwaysVisible="false" paginator="true" rows="10"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} #{msgs.AppUserMgmt_AppUsers_List_PageSizeLabel} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15" rowIndexVar="rowNum" filteredValue="#{AppUserManagementBean.lstFilteredUsrDetails}"
widgetVar="usersFilter" rowKey="#{user.userId}" selectionMode="single" selection="#{AppUserManagementBean.selectedUser}">
<f:facet name="header">
<h:outputText id="appUsrMgmtUserListHeader" style="float:left" value="#{AppUserManagementBean.applicationName} #{msgs.AppUserMgmt_AppUsers_List_Title}"/>
<p:inputText id="globalFilter" onkeyup="usersFilter.filter()" style="float:right"/>
<p:watermark forElement="tabView:userList:globalFilter" value="#{msgs.AppUserMgmt_AppUsers_List_Find}"/>
</f:facet>
<p:column id="colRowNo" headerText="#{msgs.AppUserMgmt_AppUsers_List_RowNo}">
<h:outputText value="#{rowNum+1}" />
</p:column>
<p:column id="colUserID" headerText="#{msgs.AppUserMgmt_AppUsers_List_UserID}" filterBy="#{user.userId}" filterMatchMode="contains" style="text-align:bottom" filterStyle="display:none;visibility:hidden">
<h:outputText value="#{user.userId}" />
</p:column>
<p:column id="colName" headerText="#{msgs.AppUserMgmt_AppUsers_List_FullName}" filterBy="#{user.firstName} #{user.lastName}" filterMatchMode="contains" style="text-align:bottom" filterStyle="display:none;visibility:hidden">
<h:outputText value="#{user.firstName} #{user.lastName}" />
</p:column>
<p:column id="colRole" headerText="#{msgs.AppUserMgmt_AppUsers_List_Group}" filterBy="#{user.role}" filterMatchMode="contains" style="text-align:bottom" filterStyle="display:none;visibility:hidden">
<h:outputText value="#{user.role}" />
</p:column>
<p:column id="colEmail" headerText="#{msgs.AppUserMgmt_AppUsers_List_Email}" filterBy="#{user.email}" filterMatchMode="contains" style="text-align:bottom" filterStyle="display:none;visibility:hidden">
<h:outputText value="#{user.email}" />
</p:column>
<p:column id="colExpiryDate" headerText="#{msgs.AppUserMgmt_AppUsers_List_ExpiresOn}" filterBy="#{user.expiryDate}" filterMatchMode="contains" style="text-align:bottom" filterStyle="display:none;visibility:hidden">
<h:outputText value="#{user.expiryDate}" />
</p:column>
<f:facet name="footer">
<p:commandButton id="addUserButton" value="#{msgs.AppUserMgmt_AppUsers_NewUser_ButtonLabel}" icon="ui-icon-circle-plus" update=":headerForm:panelGridNewUserDialog" oncomplete="addNewUserDialog.show()"/>
</f:facet>
</p:dataTable>
</p:column>
</p:row>
</p:panelGrid>
</p:fieldset>
<p:dialog id="addNewUserDialog" header="#{msgs.AppUserMgmt_AppUsers_NewUser_Dialog_Header} #{AppUserManagementBean.groupName},#{AppUserManagementBean.applicationName}" widgetVar="addUserDialog" resizable="false"
width="400" showEffect="clip" hideEffect="fold">
<p:panelGrid id="panelGridNewUserDialog" styleClass="insertPage">
<p:row>
<p:column>
<h:outputText id="userIDDialog" value="#{msgs.userId}" />
</p:column>
</p:row>
</p:panelGrid>
</p:dialog>
</ui:composition>
Am I missing some thing here? I have tried to find the related question in stack but could not find any. I am happy to be redirected to right question or link if any.
I would appreciate anyone's help.
<tfoot>
<tr>
<td class="ui-datatable-footer ui-widget-header"
colspan="6">
<button id="tabView:userList:addUserButton" name="tabView:userList:addUserButton"
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
Rest of the code is not sent to browser. Lot of HTML code is not rendereed. May be some HTTP header are missing?
You set dynamic="true" which means that tabs are lazy loaded. That's why is your html code incomplete. Remove this attribute and see what's happening.
Also you wrote addNewUserDialog.show(), but your widget var name is addUserDialog, so try with addUserDialog.show().
You must try update ":headerForm:tabView:panelGridNewUserDialog"
with formId="headerForm" at the beginning and add ":"