1 Reply Latest reply on Jul 18, 2011 12:46 AM by Brian Leathem

    Problem with <a4j:commandLink> rendered by ajax

    blade_runner Newbie

      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.