Error due to same client ID of components in JSF Data Table

Question

I have a JSF application with a Data Table. Each row has a 'commandLink'. When the commandLink of a row is clicked then row data must be displayed on console.

I am getting an error when I click on the commandLink, the error is as follows:

component with duplicate id "dataTable1:col1" found

viewId=/UserHome.xhtml
location=E:\workspaces_eclipse\webService\.metadata\.plugins \org.eclipse.wst.server.core\tmp2\wtpwebapps\JSF_Demo\UserHome.xhtml
phaseId=RENDER_RESPONSE(6)

Caused by:
java.lang.IllegalStateException - component with duplicate id "dataTable1:col1" found
at  org.apache.myfaces.view.facelets.compiler.CheckDuplicateIdFaceletUtils.checkIds(CheckDuplic    ateIdFaceletUtils.java:100)

The error shows that components have same IDs, however I tried to give different 'id' to each element of the data table.

The source code of JSF file 'UserHome.xhtml' is as follows:

<?xml version="1.0" encoding="ISO-8859-1" ?>

<!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:f="http://java.sun.com/jsf/core"   xmlns:h="http://java.sun.com/jsf/html">
     <h:head>
    <title>Resource Net 1.0</title>
    <h:outputStylesheet library="css" name="table-style.css"></h:outputStylesheet>
</h:head>
<h:body>
   <div align="center">
   <table width="90%" height="100%" border="0" style="cellspacing:0; border-radius:10px ;box-shadow: 0px 0px 15px 10px #888888">
    <tr>
        <td>
            <h2><div align="center">Resource Net 1.0</div></h2>
        </td>
    </tr>
    <tr>
        <td>                
            2. Generated by Map :
            <h:selectOneMenu value="#{userHomeListener.favCoffee2}">
                <f:selectItems value="#{userHomeListener.allDomains}" />
            </h:selectOneMenu>
        </td>
    </tr>       
    <tr>
        <td>
            <h:dataTable value="#{userHomeListener.documents}" var="doc"
                         binding="#{userHomeListener.documentsTable}"
                          id="dataTable1"                            
                         styleClass="order-table"
                         headerClass="order-table-header"
                         rowClasses="order-table-odd-row,order-table-even-row"
                         border="1">

                <h:column id="col1">
                    <f:facet name="header1">Document ID</f:facet>
                    #{doc.docID}
                </h:column>
                <h:column id="col2">
                    <f:facet name="header2">Document Name</f:facet>
                    #{doc.docName}
                </h:column>
                <h:column  id="col3">
                    <f:facet name="header3">Document Link</f:facet>
                     <h:form id="form1">
                     <h:commandLink id="link" value="#{doc.docLink}" action="#{userHomeListener.getRowData}"></h:commandLink>
                     </h:form>
                </h:column>
                <h:column id="col4">
                    <f:facet name="header4">Upload Date</f:facet>
                    #{doc.uploadDate}
                </h:column>

            </h:dataTable>
            <h:commandButton value="get row data" ></h:commandButton>
        </td>
    </tr>
    </table>

    </div>
</h:body>

Is there some problem with my code? Kindly suggest solutions to this issue.

Thanks in advance.

Why do you name the header facets differently for each column? Try changing them all to ``. For the `` tags: Do you actually need the ids specified? — f_puras, Aug 31 '12 at 09:43
@f_puras if you want to solve OP's problem, post the code correction in an answer, please don't edit OP's code to do this, remember that other people could see the post and think the answer itself has the solution. — Luiggi Mendoza, Aug 31 '12 at 09:52
@f_puras : Thanks for your reply. I made the changes mentioned by you. It is still giving same error. — Rajeev Singh, Aug 31 '12 at 09:53
@RajeevSingh I haven't provided a solution yet, but I can see more problems in your code. First, why would you need to set id for the ``s? If you want to render the data of a column, you could render the whole datatable (maybe I'm wrong in this part, but that's how I usually see it). Second, you're setting the `` only for the ``, this means that the data in `` won't be sended to the server, and your `` below the `` won't work because it's outside a form. — Luiggi Mendoza, Aug 31 '12 at 09:58
@LuiggiMendoza I only changed "JSD" in the headline to "JSF", as you might have noticed. Don't think this was too much of the solution ;-) — f_puras, Aug 31 '12 at 09:58
@f_puras I guess you're right, maybe I'm too tired to visit the site :( — Luiggi Mendoza, Aug 31 '12 at 10:01
@LuiggiMendoza You have my deepest sympathy for that! Besides, your comment on the posting seems reasonable. The `` in the dataTable's row even has a fixed id, so it will duplicate when there is more than one row in it... — f_puras, Aug 31 '12 at 10:08
@f_puras indeed, the form could have that id, because on client the id will be like "datatable1:0:form1", "datatable1:1:form1" and on. I guess (and only guessing) that OP has another `` that's not posted in the question, and in its columns it has another columns with these repeated ids. — Luiggi Mendoza, Aug 31 '12 at 10:18
@LuiggiMendoza Ok, did not know that ids are generated differently even within dataTables. Yet if there was another ``, wouldn't the exception just read `duplicate id "dataTable1"`? — f_puras, Aug 31 '12 at 10:26
@Luiggi Mendoza: initially I was not using id with tag or any other tag, but since there was an error showing duplicate id so I thought of adding id attribute to each element including and . Also the in the table is only responsible to read the table data, need not be submitted to the server that's why I haven't included it in the tag. — Rajeev Singh, Aug 31 '12 at 10:55

score 2 · Accepted Answer · edited May 23 '17 at 12:04

The binding attribute of the <h:dataTable> is the suspect here. It may lead to this kind of problems when the bean is in a too broad scope and/or when you're doing "wrong things" in the getter/setter of that attribute.

Putting the bean in the request scope and/or looking for alternative ways so that you can get rid of the binding altogether should solve this problem.

The combination of the binding attribute and the name of the command link action method getRowData suggests that you're merely using it to get the current table row. This was indeed the way when using the old JSF 1.x, but not anymore when using the new JSF 2.x. This can be done much better and simpler when you're running a Servlet 3.0 / EL 2.2 capable container (Tomcat 7, Glassfish 3, etc).

<h:dataTable value="#{userHomeListener.documents}" var="doc">
    <h:column>
        <h:form>
            <h:commandLink value="#{doc.docLink}" action="#{userHomeListener.getRowData(doc)}" />
        </h:form>
    </h:column>
</h:dataTable>

with

public void getRowData(Document doc) {
    // ...
}

You see, you can just pass the #{doc} straight as method argument.

Error due to same client ID of components in JSF Data Table

1 Answers1

See also: