This question already has answers here:
Binding attribute causes duplicate component ID found in the view
(2 answers)
Closed 7 years ago.
I have a XHTML page which on submission goes back to itself.
The backing bean is session scoped. On the redirect to itself the page renders the h:datatable twice and gives me duplicate id error.I can visually see the table being rendered twice as well next to each other.
** xhtml page :**
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<f:view>
<h:form >
<h:dataTable binding="#{ecole.dataTable}" value="#{ecole.getEcoleList()}" var="c"
border="0" width="100%" cellpadding="0" cellspacing="0"
styleClass="order-table"
headerClass="order-table-header"
rowClasses="order-table-odd-row,order-table-even-row"
>
<h:column>
<f:facet name="header">
ID
</f:facet>
#{c.idEcole}
</h:column>
<h:column>
<f:facet name="header">
Nom
</f:facet>
#{c.nomEcole}
</h:column>
<h:column>
<f:facet name="header">
Description
</f:facet>
#{c.desc_ecl}
</h:column>
<h:column>
<f:facet styleclass="options-width" name="header">
Options
</f:facet>
<h:commandLink action="#{ecole.editEcoleItem()}" title="Edit" >
<h:graphicImage style="border:0" url="/icones/b_edit.png" />
</h:commandLink>
<h:commandLink title="Delete"
onclick="return confirm('Voulez-vous confirmer la suppression?') ;"
action="#{ecole.deleteEcole(c)}"
>
<h:graphicImage style="border:0" url="/icones/b_drop.png" />
</h:commandLink>
</h:column>
</h:dataTable>
<!-- end product-table................................... -->
</h:form>
</f:view>
this is error message shown :
java.lang.IllegalStateException: Component ID j_id15:j_id16:j_id29 has already been found in the view. See below for details.
+id: null
type: javax.faces.component.UIViewRoot#1abe6f6
+id: javax_faces_location_HEAD
type: javax.faces.component.UIPanel#c84a5d
+id: j_id4
type: javax.faces.component.UIOutput#18a5776
+id: j_id22
type: javax.faces.component.UIOutput#1742dcc
+id: j_id19
...
The binding attribute should bind to a request scoped bean or just be removed altogether and be replaced by a better alternative, depending on the concrete functional requirement.
If I get the functional requirement right of being able to retrieve the current item in the editEcoleItem() method, then you can just pass it directly as method argument, exactly as you did in deleteEcole(). This way you can just remove the binding attribute altogether. That's the JSF 2.0 / EL 2.2 way. Perhaps you were focusing too much on old JSF 1.x examples. You shouldn't do that when developing with JSF 2.x.
See also:
A JSF 2.0 CRUD example
How can I pass selected row to commandLink inside dataTable?
Related
I'm working on a web application using JSF and PrimeFaces. One of the pages displays a table of entities, and I'm supposed to add a context menu to the table.
More specifically: The last column contains a p:menuButton whose content depends on the respective row. The menuItems are stored as a ui:compositionin another file, and I'm supposed to simply include them in the context menu.
The menuitems are dynamic, however. The entities do have a boolean member called enabled. For enabled entities, Edit, Delete, and Disable are displayed. For disabled entities, there's only Enable.
With the code below, the context menu is displayed, but they the content is only updated if I select another row via left click. Right-clicking does select rows, but the selectedPerson of the backingbean is not updated.
Apparently there were some changes in PrimeFaces 3.5. I found many references to the contextMenu ajax event.
But when I add it to the datatable like this:
<p:ajax event="contextMenu" update=":persons-form:contextMenu" />
.. the menu appears but disappears immediately. Presumably, because some update method is getting called. In the short timespan it's displayed, I can see it still showing the old menuitems.
So, to summarize: How can I make a contextmenu working as it should in a datatable with PrimeFaces 3.5? Meaning, right-clicking should select a row and also update the menu before displaying it, as the menuitems depend on the row data.
personList.xhtml:
<p:contextMenu id="contextMenu" for="persons">
<ui:include src="/layout/personActionMenu.xhtml">
<ui:param name="thePerson" value="#{personListBean.selectedPerson}"/>
</ui:include>
</p:contextMenu>
<p:dataTable id="persons"
value="#{personListBean.allPersons}"
var="p"
rowKey="#{p.id}"
selection="#{personListBean.selectedPerson}"
selectionMode="single"
rowStyleClass="#{p.enabled ? '' : 'disabledTableItem'}">
<p:ajax event="rowSelect" update=":persons-form:contextMenu"/>
<p:column>
<f:facet name="header">Name</f:facet>
<h:outputText value="#{p.name}" />
</p:column>
<p:column>
<p:menuButton value="Actions">
<ui:include src="/layout/personActionMenu.xhtml">
<ui:param name="thePerson" value="#{p}"/>
</ui:include>
</p:menuButton>
</p:column>
</p:dataTable>
</h:form>
personActionMenu.xhtml:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:u="http://java.sun.com/jsf/composite/ui"
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">
<p:menuitem rendered="#{personListBean.isEnabled(thePerson)}" outcome="edit.xhtml" value="Edit" icon="ui-icon-gear">
<f:param name="id" value="#{thePerson.id}" />
</p:menuitem>
<p:menuitem actionListener="#{personListBean.deletePerson(thePerson)}" value="Delete" update=":person-form"
icon="ui-icon-close" rendered="#{personListBean.isEnabled(thePerson)}"/>
<p:menuitem actionListener="#{personListBean.toggleEnabled(thePerson)}" update=":persons-form" value="#{personListBean.toggleEnabledMenuItemLabel(thePerson)}" />
</ui:composition>
Please try this:
<p:contextMenu id="contextMenu" for="persons" widgetVar="ctxMenu" beforeShow="return true;">
<ui:include src="/layout/personActionMenu.xhtml">
<ui:param name="thePerson" value="#{personListBean.selectedPerson}"/>
</ui:include>
</p:contextMenu>
<p:dataTable ...>
...
<p:ajax event="contextMenu" update=":persons-form:contextMenu" oncomplete="ctxMenu.show(currentEvent);" />
...
</p:dataTable ...>
This is taken from CannyDuck´s post in the PF forum.
Hope this works for you as well.
I want to export a data table in csv,pdf format in primefaces 4.0 .For that I used following code :
<p:dataTable var="valuesTable" value="#{userBean.groupResultList}"
paginator="false" id="valuesTable" resizableColumns="true"
rendered="#{not empty userBean.groupResultList}">
<p:column headerText="Group" id="grp"> #{valuesTable.groupName}</p:column>
<p:column headerText="Technical Knowledge" id="tk">
#{valuesTable.tkValue}
</p:column>
<p:column headerText="Project Management" id="pm">
#{valuesTable.pmValue}
</p:column>
<p:column headerText="Growth" id="ga">
#{valuesTable.gaValue}
</p:column>
<f:facet name="footer">
<h:commandLink>
<p:graphicImage value="/images/xml.jpeg" width="20" height="20" />
<p:dataExporter target="valuesTable" type="xml" fileName="Data_XML" />
</h:commandLink>
</f:facet>
</p:dataTable>
Data table displays correct data in each cell when I run the application.
But when I try to export it in csv or pdf format, rather then exporting actual numbers (or values of the object) it is exporting "#{valuesTable.groupName}" "#{valuesTable.tkValue}" ,"#{valuesTable.pmValue}" ,"#{valuesTable.gaValue}" for each object in csv file.
CSV file Content :
#{valuesTable.groupName} #{valuesTable.tkFormatedValue} #{valuesTable.pmFormatedValue} #{valuesTable.gaFormatedValue}
Data Table Content :
Group Name Technical Knowledge Project Management Growth
India .8 .7 1.0
I don not know why it is exporting the data table in this way..
Please Help
Thanks
I had a similar problem once with the dataTable exporter.
You have to use an outputText like this:
<h:outputText value="#{valuesTable.tkValue}"/>
inside all the column tags, in order to see the values properly.
Your column would become:
<p:column headerText="Technical Knowledge" id="tk">
<h:outputText value="#{valuesTable.tkValue}"/>
</p:column>
Replace all your columns and try that!
Hope it helps!
And also I think the headers are not ok. You have to use an f:facet tag like this:
<p:column id="tk">
<f:facet name="header">
<h:outputText value="Technical Knowledge" />
</f:facet>
<h:outputText value="#{valuesTable.tkValue}"/>
</p:column>
Now you should also see the headers in the export CSV file.
DataTable export is not working in Primefaces 4.0
Step 1: You need to add jars for exporting csv ,pdf file .
itext-1.1.4.jar
Step 2: DataExplorar.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">
<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">
<p:panel header="Generate Report ">
<div>
<h:commandLink>
<p:graphicImage value="/images/pdf.png"
style="width:30px; hight:30px;" />
<p:dataExporter type="pdf" target="tb1"
fileName="fileName" />
</h:commandLink>
<h:commandLink>
<p:graphicImage value="/images/excel.png"
style="width:25px; hight:30px;" />
<p:dataExporter type="xls" target="tb1"
fileName="fileName" />
</h:commandLink>
</div>
</p:panel>
PF 3.5.10, Mojara 2.1.21, Omnifaces 1.5
I have Facelet-Template with p:menu and p:include for dialog
mytemplate.xhtml:
<h:form> ... <p:menubar>
<p:menuitem value="Start Dialog" oncomplete="mydialogwidget.show()"/>
<p:menuitem value="open another page" action="/app/mypage.xhtml?faces-redirect=true"/>
</p:menubar> ... </h:form>
<ui:insert name="content" />
<ui:include="/app/mydialog.xhtml" />
mydialog.xhtml:
<ui:composition>
<p:dialog widgetVar="mydialogwidget" ...>
<h:form>
<p:datatable binding="#{mybean.table}">
<p:column id="col_first"> ... </p:column>
...
<p:column id="col_last"> ... </p:colum>
</p:datatable>
</h:form>
</p:dialog>
</ui:composition>
mypage.xhtml:
<ui:composition template="/app/mytemplate.xhtml">
<ui:define name="content">
<h:form> ... </h:form>
</ui:define>
</ui:composition>
If I start mypage.xhtml form menue, I become JSF1007 error (Duplicate ids) The component tree will be written to my console. The simplified component tree output:
+id: mydialog
+id: mytable
+id: col_first <<=============
....
+id: col_last
+id:col_first <<========
The mydialog.xhtml will be included only once. The answer to question JSF with Primefaces Menu duplicate Id error? doesn't help me.
How can I aviod this error ? Where comes this error from ?
The prolbem was binding attribute on datatable. See also: Binding attribute causes duplicate component ID found in the view
SessionScoped component was used in multiple views.
I've used EL-table binding and then the problem was disappeared.
Good evening from Sweden!
I try to get a primefaces datatable to refresh. I tried various hints and solutions but nothing is working.
The button triggers a search in the DB and if I refresh the paga manually or if I use the tables sorting-function the result is shown.
Means the code in the backing bean works. But no automatic refresh directly after the button is clicked..
The bean scope is Session.
Here is the 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: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:head>
</h:head>
<h:body>
<ui:composition template="/templates/BasicTemplate.xhtml">
<ui:define name="content">
<h:form id="src_res">
<h2>Sök klass,undervisningsgrupp eller individ</h2>
<b>Sökord</b>: <h:inputText id="sw" value="#{smsb.searchword}"/>
<p:outputLabel value="Lärare"></p:outputLabel>
<h:selectOneListbox size="1" id="teacher" value="#{smsb.searchteacher}" >
<f:selectItems value="#{smsb.teachers}"/>
</h:selectOneListbox>
<p:commandButton action="#{smsb.searchgrp_user}" value="Sök!" update="src_list"/>
<p:dataTable id="src_list" value="#{smsb.searchresult}" var="obj" >
<p:column width="20%" sortBy="#{obj.groupname}">
<f:facet name="header" >
<h:outputText value="Beteckning"/>
</f:facet>
<h:outputText value="#{obj.groupname}"/>
</p:column>
<p:column width="10%">
<f:facet name="header" >
<h:outputText value="typ"/>
</f:facet>
<h:outputText value="#{obj.klass}"/>
</p:column>
<p:column width="10%" sortBy="#{obj.teacher}">
<f:facet name="header" >
<h:outputText value="lärare"/>
</f:facet>
<h:outputText value="#{obj.teacher}"/>
</p:column>
</p:dataTable>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
Any help or hints?
With regards
Ralf
EDIT
Hello and thanx for the offer to help!
As you guessed searchresult is a list and the Getter is defined by
List<sbasUserList> searchresult;
public List<sbasUserList> getSearchresult() {
return searchresult;
}
search_grp is a method of the backing bean:
public String searchgrp_user(){
//FacesContext context = FacesContext.getCurrentInstance();
ObjectContainer db = this.connBD("sms");
ObjectSet<sbasUserList> res;
this.searchresult = new ArrayList<sbasUserList>() ;
Query query=db.query();
query.constrain(sbasUserList.class);
query.descend("groupname").constrain(this.searchword).like();
query.descend("type").constrain('P').or(query.descend("type").constrain('M'));
query.descend("teacher").constrain(searchteacher).contains();
res = query.execute();
this.searchresult.addAll(res);
System.out.println(this.searchresult.size());
db.close();
return "";
}
The table is filled with the right dat if i update manually the browser. (F5) but certainly would like to have this done automatically.
Sorry folks! The glassfish server I was using wasn't setup right. It showed not all of the errors in the log file. I did a complete new setup of the whole IDE (new Eclipse, new glassfish server, thanx BalusC for the incredible tutorial!!!) and I found all errors. Now it works like it should!
Regards
Ralf
launcher.xhtml
this form uses "thing"
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:custom="http://java.sun.com/jsf/composite/components">
<h:form id="form">
<p:panelGrid
id="pgid"
columns="2">
<h:outputText value="title"/>
<h:outputText value="#{bean.value}"/>
</p:panelGrid>
<custom:thing
via="#{bean.via1}"
viaListener="#{bean.via2Listener()}"
vias="#{bean.vias1}">
</h:form>
thing.xhtml
<p:selectOneMenu
process="#this"
value="#{cc.attrs.via}">
<p:ajax
listener="#{cc.attrs.viaListener}"
update="form:pgid"
/>
<f:selectItems value="#{cc.attrs.vias}"/>
</p:selectOneMenu>
faces can´t find form:pgid. tried with and without prepending "form". thanks
Relative client IDs (those not starting with :) are searched relative to the parent NamingContainer component, which is in your case the composite component itself. So it's looking for form:pgid in the context of <cc:implementation>.
You need to prefix the client ID with : (the default NamingContainer separator character) to make it absolute to the view root.
<p:ajax ... update=":form:pgid" />
See also:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"