Using commandLinks and commandButtons in dataTables

Question

I'm trying to create a page that displays data from a database and allows you to edit individual rows by clicking on either a commandButton or a commandLink within a dataTable that then takes you to another page where you can edit that particular row of the table.
When using a commandButton, it works perfectly for all but the last entry in the table. But when the button in the last line is clicked, nothing happens at all, it does not seem to call the action listener and it does not perform the navigation based on the action. But with all the previous buttons it calls the actionListener and navigates perfectly. Can anyone tell me why this would be? The code is as follows:
<h:dataTable value="#{Categories.categories}" var="category" >
<h:column>
<f:facet name="header"><h:outputText value="#{msgs.deptColumnHead}"/></f:facet>
<h:outputText value="#{category.departmentName}"/>
</h:column>
<h:column>
<f:facet name="header"><h:outputText value="#{msgs.categoriesColumnHead}"/></f:facet>
<h:outputText value="#{category.categoriesList}"/>
</h:column>
<h:column>
<h:form>
<h:inputHidden id="dept" value="#{category.departmentId}"/>
<h:commandButton id="editButton" action="EditCat" actionListener="#{Categories.editListener}" value="{msgs.editSelectedButtonText}"/>
</h:form>
</h:column>
</h:dataTable>
When using commandLinks, only the first one works (of 4). For the other 3 the page goes into error when the link is clicked and it complains that 'document.forms._id2:3:_id10._id2:3:_id10:idcl is null or not an object'. If anyone could tell me what is wrong with my code, i would be most appreciative.
<h:dataTable value="#{Categories.categories}" var="category" >
<h:column>
<f:facet name="header"><h:outputText value="#{msgs.deptColumnHead}"/></f:facet>
<h:outputText value="#{category.departmentName}"/>
</h:column>
<h:column>
<f:facet name="header"><h:outputText value="#{msgs.categoriesColumnHead}"/></f:facet>
<h:outputText value="#{category.categoriesList}"/>
</h:column>
<h:column>
<h:form>
<h:inputHidden id="dept" value="#{category.departmentId}"/>
<h:commandLink action="EditCat" actionListener="#{Categories.editListener}">
<h:outputText value="#{msgs.editSelectedButtonText}"/>
</h:commandLink>
</h:form>
</h:column>
</h:dataTable>

Answer 1

1) I have had very odd behavior in JSF when ALL of the
JSF elements on a page do not have an id attribute. If
you do not assign an id then JSF will manufacture a
unique id on the flag. Sometimes the unique id wasn't
so unique and there were errors like you are seeing or
just odd behavior on the form, buttons not generating
events, or incorrect rendering, etc.
By 'ALL' I mean output text, columns, anything that
accepts an id attribute. Don't trust the code to
generate an id correctly for you.Just want it known that while this may be necessary in the short-term to work around bugs, this is definitely not the intent of the EG! We don't want people getting in the habit of
Also note that this behavior is not consistent
sometimes it would not appear on a page unless the
page was updated and more controls added to it.Ah, well that is a known issue; while developing a page, the Sun RI can have problems if you change a page's contents between two submissions. (It doesn't pick up that the .jsp has changed.) I'd recommend:
- Use client-side state saving.
- Make sure you're making a new request for a page (not re-POST-ing anything!) when the page's contents have changed.
If you follow both of those rules, then you should generally be able to get away without explicit IDs everywhere as you actively develop your page.
Explicit IDs are required if you're inside <c:if>; this is known and documented.
2) try putting the hidden input control in it's own
columnNo, that'll give you a bonus set of <td> elements, which isn't what you want.
-- Adam Winer (EG member)