Problem with <a4j:commandLink> rendered by ajax
I have a page that has a dataTable with some commandLinks in its rows (in the example the two last columns have commandLink). When the page is first loaded and the table rendered, the links work perfectly. When the user click on the links a popupPanel is displayed with details of the clicked item (se code for more information). Well, this popupPanel has a table with rows with commandLinks. When I click in these new ajax rendered links they don't work!!! I don't have any idea where is the mistake. I would appreciate a lot any help. The links in the popupPanel should open others popupPanel, with details about the item clicked in the first popupPanel and so on...
Below is the code of the first table, rendered when the page is first loaded.
<h:form>
<fieldset>
<legend> Department </legend>
<br/>
<rich:dataTable id="dataTable" style="width:100%" rows="10"
value="#{departmentCrudMB.listEntities}" var="row"
rowClasses="rowClass1,rowClass2" sortMode="single"
onRowMouseOver="this.style.backgroundColor='#{a4jSkin.headerBackgroundColor}'"
onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">
<rich:column style="width:16px">
<h:commandLink
name="editar"
execute="@this"
action="#{departmentCrudMB.enableEdition}">
<a4j:param name="id" value="#{row.id}"
assignTo="#{departmentCrudMB.id}" />
<h:graphicImage library="images" name="edit.png"
title="#{messages['btn.alterar']}" style="border:0" />
</h:commandLink>
</rich:column>
<rich:column style="width:16px">
<a4j:commandLink
onclick="idEntity = #{row.id}; #{rich:component('popupConfirmDelete')}.show(); return false;">
<h:graphicImage library="images" name="delete.png"
title="#{messages['btn.excluir']}" style="border:0" />
</a4j:commandLink>
</rich:column>
<rich:column>
<f:facet name="header">id</f:facet>
<h:outputText value="#{row.id}" />
</rich:column>
<rich:column>
<f:facet name="header">#{messages['department.budget']}</f:facet>
<h:outputText value="#{row.budget}" />
</rich:column>
<rich:column>
<f:facet name="header">#{messages['department.location']}</f:facet>
<h:outputText value="#{row.location}" />
</rich:column>
<rich:column>
<f:facet name="header">#{messages['department.name']}</f:facet>
<h:outputText value="#{row.name}" />
</rich:column>
<rich:column>
<f:facet name="header">Projects</f:facet>
<a4j:commandLink
value="#{messages['msg.expand']}"
execute="@this"
render="popupDepartmentProject"
oncomplete="#{rich:component('popupDepartmentProject')}.show()">
<a4j:param name="id" value="#{row.id}"
assignTo="#{departmentCrudMB.id}" />
</a4j:commandLink>
</rich:column>
<rich:column>
<f:facet name="header">Employees</f:facet>
<a4j:commandLink
value="#{messages['msg.expand']}"
execute="@this"
render="popupDepartmentEmployee"
oncomplete="#{rich:component('popupDepartmentEmployee')}.show()">
<a4j:param name="id" value="#{row.id}"
assignTo="#{departmentCrudMB.id}" />
</a4j:commandLink>
</rich:column>
<f:facet name="footer">
<rich:dataScroller maxPages="30" />
</f:facet>
</rich:dataTable>
</fieldset>
</h:form>
And below the popupPanels...
<rich:popupPanel
id="popupDepartmentProject"
autosized="true">
<f:facet name="controls">
<h:graphicImage library="images/layout" style="cursor:pointer" name="btn_exit.png" onclick="#{rich:component('popupDepartmentProject')}.hide(); return false;" />
</f:facet>
<br/>
<br/>
<fieldset>
<legend> Projects associados a Department de id #{departmentCrudMB.id} </legend>
<br/>
<rich:dataTable id="dataTableDepartmentProject" style="width:auto" rows="10"
value="#{departmentCrudMB.entity.projects}" var="row"
rowClasses="rowClass1,rowClass2" sortMode="single"
onRowMouseOver="this.style.backgroundColor='#{a4jSkin.headerBackgroundColor}'"
onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
rendered="#{departmentCrudMB.entity != null and !departmentCrudMB.inEdition}">
<rich:column>
<f:facet name="header">id</f:facet>
<h:outputText value="#{row.id}" />
</rich:column>
<rich:column>
<f:facet name="header">#{messages['project.budget']}</f:facet>
<h:outputText value="#{row.budget}" />
</rich:column>
<rich:column>
<f:facet name="header">#{messages['project.name']}</f:facet>
<h:outputText value="#{row.name}" />
</rich:column>
<rich:column>
<f:facet name="header">department</f:facet>
<a4j:commandLink
value="#{messages['msg.expand']}"
execute="@this"
render="popupProjectDepartment"
onbeforedomupdate="#{rich:component('popupDepartmentProject')}.hide(); return false;"
oncomplete="#{rich:component('popupProjectDepartment')}.show(); return false;">
<a4j:param name="id" value="#{row.id}"
assignTo="#{projectCrudMB.id}" />
</a4j:commandLink>
</rich:column>
<rich:column>
<f:facet name="header">Employees</f:facet>
<a4j:commandLink
value="#{messages['msg.expand']}"
execute="@this"
render="popupProjectEmployee"
onbeforedomupdate="#{rich:component('popupDepartmentProject')}.hide(); return false;"
oncomplete="#{rich:component('popupProjectEmployee')}.show(); return false;">
<a4j:param name="id" value="#{row.id}"
assignTo="#{projectCrudMB.id}" />
</a4j:commandLink>
</rich:column>
<f:facet name="footer">
<rich:dataScroller maxPages="30"
onbeforedomupdate="#{rich:component('popupDepartmentProject')}.hide(); return false;"
oncomplete="#{rich:component('popupDepartmentProject')}.show(); return false;" />
</f:facet>
</rich:dataTable>
</fieldset>
</rich:popupPanel>
<rich:popupPanel
id="popupDepartmentEmployee"
autosized="true">
<f:facet name="controls">
<h:graphicImage library="images/layout" style="cursor:pointer" name="btn_exit.png" onclick="#{rich:component('popupDepartmentEmployee')}.hide(); return false;" />
</f:facet>
<br/>
<br/>
<fieldset>
<legend> Employees associados a Department de id #{departmentCrudMB.id} </legend>
<br/>
<rich:dataTable id="dataTableDepartmentEmployee" style="width:auto" rows="10"
value="#{departmentCrudMB.entity.employees}" var="row"
rowClasses="rowClass1,rowClass2" sortMode="single"
onRowMouseOver="this.style.backgroundColor='#{a4jSkin.headerBackgroundColor}'"
onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
rendered="#{departmentCrudMB.entity != null and !departmentCrudMB.inEdition}">
<rich:column>
<f:facet name="header">id</f:facet>
<h:outputText value="#{row.id}" />
</rich:column>
<rich:column>
<f:facet name="header">#{messages['employee.name']}</f:facet>
<h:outputText value="#{row.name}" />
</rich:column>
<rich:column>
<f:facet name="header">#{messages['employee.salary']}</f:facet>
<h:outputText value="#{row.salary}" />
</rich:column>
<rich:column>
<f:facet name="header">department</f:facet>
<a4j:commandLink
value="#{messages['msg.expand']}"
execute="@this"
render="popupEmployeeDepartment"
onbeforedomupdate="#{rich:component('popupDepartmentEmployee')}.hide(); return false;"
oncomplete="#{rich:component('popupEmployeeDepartment')}.show(); return false;">
<a4j:param name="id" value="#{row.id}"
assignTo="#{employeeCrudMB.id}" />
</a4j:commandLink>
</rich:column>
<rich:column>
<f:facet name="header">Projects</f:facet>
<a4j:commandLink
value="#{messages['msg.expand']}"
execute="@this"
render="popupEmployeeProject"
onbeforedomupdate="#{rich:component('popupDepartmentEmployee')}.hide(); return false;"
oncomplete="#{rich:component('popupEmployeeProject')}.show(); return false;">
<a4j:param name="id" value="#{row.id}"
assignTo="#{employeeCrudMB.id}" />
</a4j:commandLink>
</rich:column>
<f:facet name="footer">
<rich:dataScroller maxPages="30"
onbeforedomupdate="#{rich:component('popupDepartmentEmployee')}.hide(); return false;"
oncomplete="#{rich:component('popupDepartmentEmployee')}.show(); return false;" />
</f:facet>
</rich:dataTable>
</fieldset>
</rich:popupPanel>
Anyone has idea why just the links rendered initially work? Every bean has request scope.
PS: There are other popupPanels in the page, but I preffered don't show them, the code would increase in size and I don't think they are relevant, since the idea is the same.
