Problem with commandLink inside a datable inside a popupPanel
blade_runner Jul 5, 2011 5:00 PMHello, I need some help here!
I spent the last two days trying to solve a stupid problem. I guess anyone will see the answer as soon as I post it.
Let's move on...
I have the following fragment of code...
<h:form> <div><rich:messages id="messages" globalOnly="false" styleClass="message" /></div> <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}" render="panelEdit"> <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> </h:form> <some other code here....> <and finally the important part....> <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/> <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}"> <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" onclick="alert('Chamando: popupProjectDepartment ; Beam: projectCrudMB; Com id: #{row.id}')" onbeforedomupdate="#{rich:component('popupDepartmentProject')}.hide(); return false;" oncomplete="alert('#{projectCrudMB.id}'); #{rich:component('popupProjectDepartment')}.show(); return false;"> <a4j:param name="id" value="#{row.id}" assingTo="#{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" onclick="alert('Chamando: popupProjectEmployee ; Beam: projectCrudMB; Com id: #{row.id}')" 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/> <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}"> <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" onclick="alert('Chamando: popupEmployeeDepartment ; Beam: employeeCrudMB; Com id: #{row.id}')" 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" onclick="alert('Chamando: popupEmployeeProject ; Beam: employeeCrudMB; Com id: #{row.id}')" 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> <rich:popupPanel id="popupEmployeeDepartment" autosized="true"> <f:facet name="controls"> <h:graphicImage library="images/layout" style="cursor:pointer" name="btn_exit.png" onclick="#{rich:component('popupEmployeeDepartment')}.hide(); return false;" /> </f:facet> <br/> <fieldset> <legend> Departments associados a Employee de id #{employeeCrudMB.id} </legend> <br/> <rich:dataTable id="dataTableEmployeeDepartment" style="width:auto" rows="10" value="#{employeeCrudMB.entity.department}" var="row" rowClasses="rowClass1,rowClass2" sortMode="single" onRowMouseOver="this.style.backgroundColor='#{a4jSkin.headerBackgroundColor}'" onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'" rendered="#{employeeCrudMB.entity != null}"> <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" onclick="alert('Chamando: popupDepartmentProject ; Beam: departmentCrudMB; Com id: #{row.id}')" onbeforedomupdate="#{rich:component('popupEmployeeDepartment')}.hide(); return false;" oncomplete="#{rich:component('popupDepartmentProject')}.show(); return false;"> <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" onclick="alert('Chamando: popupDepartmentEmployee ; Beam: departmentCrudMB; Com id: #{row.id}')" onbeforedomupdate="#{rich:component('popupEmployeeDepartment')}.hide(); return false;" oncomplete="#{rich:component('popupDepartmentEmployee')}.show(); return false;"> <a4j:param name="id" value="#{row.id}" assignTo="#{departmentCrudMB.id}" /> </a4j:commandLink> </rich:column> <f:facet name="footer"> <rich:dataScroller maxPages="30" onbeforedomupdate="#{rich:component('popupEmployeeDepartment')}.hide(); return false;" oncomplete="#{rich:component('popupEmployeeDepartment')}.show(); return false;" /> </f:facet> </rich:dataTable> </fieldset> </rich:popupPanel> <rich:popupPanel id="popupEmployeeProject" autosized="true"> <f:facet name="controls"> <h:graphicImage library="images/layout" style="cursor:pointer" name="btn_exit.png" onclick="#{rich:component('popupEmployeeProject')}.hide(); return false;" /> </f:facet> <br/> <fieldset> <legend> Projects associados a Employee de id #{employeeCrudMB.id} </legend> <br/> <rich:dataTable id="dataTableEmployeeProject" style="width:auto" rows="10" value="#{employeeCrudMB.entity.projects}" var="row" rowClasses="rowClass1,rowClass2" sortMode="single" onRowMouseOver="this.style.backgroundColor='#{a4jSkin.headerBackgroundColor}'" onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'" rendered="#{employeeCrudMB.entity != null}"> <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" onclick="alert('Chamando: popupProjectDepartment ; Beam: projectCrudMB; Com id: #{row.id}')" onbeforedomupdate="#{rich:component('popupEmployeeProject')}.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" onclick="alert('Chamando: popupProjectEmployee ; Beam: projectCrudMB; Com id: #{row.id}')" onbeforedomupdate="#{rich:component('popupEmployeeProject')}.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('popupEmployeeProject')}.hide(); return false;" oncomplete="#{rich:component('popupEmployeeProject')}.show(); return false;" /> </f:facet> </rich:dataTable> </fieldset> </rich:popupPanel> <rich:popupPanel id="popupProjectDepartment" autosized="true"> <f:facet name="controls"> <h:graphicImage library="images/layout" style="cursor:pointer" name="btn_exit.png" onclick="#{rich:component('popupProjectDepartment')}.hide(); return false;" /> </f:facet> <br/> <fieldset> <legend> Department associado a Project de id #{projectCrudMB.id} </legend> <br/> <h:panelGrid id="panelGridProjectDepartment" columns="2" rendered="#{projectCrudMB.entity != null}"> <h:outputLabel style="font-weight:bold;">id</h:outputLabel> <h:outputText value="#{projectCrudMB.entity.department.id}" /> <h:outputLabel style="font-weight:bold;">#{messages['department.budget']}</h:outputLabel> <h:outputText value="#{projectCrudMB.entity.department.budget}" /> <h:outputLabel style="font-weight:bold;">#{messages['department.location']}</h:outputLabel> <h:outputText value="#{projectCrudMB.entity.department.location}" /> <h:outputLabel style="font-weight:bold;">#{messages['department.name']}</h:outputLabel> <h:outputText value="#{projectCrudMB.entity.department.name}" /> <h:outputLabel style="font-weight:bold;">Projects</h:outputLabel> <a4j:commandLink value="#{messages['msg.expand']}" execute="@this" render="popupDepartmentProject" onclick="alert('Chamando: popupDepartmentProject ; Beam: departmentCrudMB; Com id: #{projectCrudMB.entity.department.id}')" onbeforedomupdate="#{rich:component('popupProjectDepartment')}.hide(); return false;" oncomplete="#{rich:component('popupDepartmentProject')}.show(); return false;"> <a4j:param name="id" value="#{projectCrudMB.entity.department.id}" assignTo="#{departmentCrudMB.id}" /> </a4j:commandLink> <h:outputLabel style="font-weight:bold;">Employees</h:outputLabel> <a4j:commandLink value="#{messages['msg.expand']}" execute="@this" render="popupDepartmentEmployee" onclick="alert('Chamando: popupDepartmentEmployee ; Beam: departmentCrudMB; Com id: #{projectCrudMB.entity.department.id}')" onbeforedomupdate="#{rich:component('popupProjectDepartment')}.hide(); return false;" oncomplete="#{rich:component('popupDepartmentEmployee')}.show(); return false;"> <a4j:param name="id" value="#{projectCrudMB.entity.department.id}" assignTo="#{departmentCrudMB.id}" /> </a4j:commandLink> </h:panelGrid> </fieldset> </rich:popupPanel> <rich:popupPanel id="popupProjectEmployee" autosized="true"> <f:facet name="controls"> <h:graphicImage library="images/layout" style="cursor:pointer" name="btn_exit.png" onclick="#{rich:component('popupProjectEmployee')}.hide(); return false;" /> </f:facet> <br/> <fieldset> <legend> Employees associados a Project de id #{projectCrudMB.id} </legend> <br/> <rich:dataTable id="dataTableProjectEmployee" style="width:auto" rows="10" value="#{projectCrudMB.entity.employees}" var="row" rowClasses="rowClass1,rowClass2" sortMode="single" onRowMouseOver="this.style.backgroundColor='#{a4jSkin.headerBackgroundColor}'" onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'" rendered="#{projectCrudMB.entity != null}"> <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" onclick="alert('Chamando: popupEmployeeDepartment ; Beam: employeeCrudMB; Com id: #{row.id}')" onbeforedomupdate="#{rich:component('popupProjectEmployee')}.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" onclick="alert('Chamando: popupEmployeeProject ; Beam: employeeCrudMB; Com id: #{row.id}')" onbeforedomupdate="#{rich:component('popupProjectEmployee')}.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('popupProjectEmployee')}.hide(); return false;" oncomplete="#{rich:component('popupProjectEmployee')}.show(); return false;" /> </f:facet> </rich:dataTable> </fieldset> </rich:popupPanel>
The idea is: I'll show a datatable with entities on database... Each entity has a relationship with others entities. The user will click on a command link and another popupPanel will appear and show the details of this related entity. And in this new popupPanel there will be others commandLinks to others entities and so on...
The problem: When I start the application and click on a link in the original datatable the popupPanel opens perfectly, but when I click on a commandLink inside this popupPanel the request is sent to the container (tomcat) but as far I know, the parameter is not been sent! Ah, another important peace of information, the scope of these bean are request.
I spent 239084752394875 hours trying to solve it, and I'm ashmed, I'm really missing something...