7 Replies Latest reply on Mar 13, 2007 9:48 AM by Claudionor Junior

    a4j:commandLink does not rerender datatable

    Michal Glowacki Novice

      Hi

      I've a problem of h:datatable not being rerendered by a4j:commandlink. I had to use ui:hyperlink (Sun's comps library) + a4j:support to make it work. Works fine, but a4j:status is not detecting ajax request and doesn't change. So it'd be great if I can get this a4j:commandLink working. I've added h:messages, no errors. a4j:log, no errors, state 4, but response returns empty html tags (I mean without data for datatable, but it's quite obvious - value getting method is not being invoked when commandLink is clicked).

      Can anyone help?

      Regards,
      Michal

        • 1. Re: a4j:commandLink does not rerender datatable
          Sergey Smirnov Master

          You need to have a special listener in order to make a4j:commandLink working inside the h:dataTable due the specific of h:dataTable architecture

          See:
          http://livedemo.exadel.com/a4j-repeat-rerender/

          • 2. Re: a4j:commandLink does not rerender datatable
            Michal Glowacki Novice

            No, a4j:commandLink is outside of the datatable. And already tried with ForceRender...

            • 3. Re: a4j:commandLink does not rerender datatable
              Sergey Smirnov Master

              Could you post the code snippet, please? It will make your use case clear

              • 4. Re: a4j:commandLink does not rerender datatable
                Michal Glowacki Novice

                 

                <h:panelGroup styleClass="category-tree-panel">
                 <a4j:outputPanel id="serverTreePanel">
                 <t:tree2 clientSideToggle="false" id="tree" showLines="false" showNav="false" showRootNode="false"
                 value="#{visibleCategoriesTreeBean.treeModel}" var="node" varNodeToggler="t">
                 <f:facet name="folder">
                 <h:panelGroup id="folderPanelGroup">
                 <a4j:commandLink action="#{t.toggleExpanded}" actionListener="#{event$EventsToApprove.categoryName}"
                 id="expandCollapseLink1" immediate="true" reRender="eventsDataTable"
                 rendered="#{node.leaf}" styleClass="treeNode"> <f:verbatim/>
                 <t:graphicImage style="border:0px" url="/category/images/person.png"/>
                 <f:verbatim/>
                 <h:outputText rendered="true" value="#{node.description}"/>
                 </a4j:commandLink>
                 <a4j:commandLink action="#{t.toggleExpanded}" actionListener="#{visibleCategoriesTreeBean.processToggle}"
                 id="expandCollapseLink1" immediate="true" reRender="serverTreePanel,eventsDataTable"
                 rendered="#{!node.leaf}" styleClass="treeNode">
                 <f:verbatim/>
                 <t:graphicImage style="border:0px" url="#{!t.nodeExpanded ? '/category/images/yellow-folder-closed.png' : '/category/images/yellow-folder-open.png'}"/>
                 <f:verbatim/>
                 <h:outputText rendered="true" value="#{node.description}"/>
                 </a4j:commandLink>
                 </h:panelGroup>
                 </f:facet>
                 </t:tree2>
                 </a4j:outputPanel>
                
                <h:dataTable binding="#{event$EventsToApprove.eventsDataTable}"
                 columnClasses="column_middle_left, column_middle_left, column_middle_left, column_middle_center" headerClass="list-header"
                 id="eventsDataTable" rowClasses="list-row-even,list-row-odd" style="border: 1px solid black; width: 100%"
                 value="#{event$EventsToApprove.eventsTable}" var="currentRow">
                 <h:column binding="#{event$EventsToApprove.column1}" id="column1">
                 <h:outputText binding="#{event$EventsToApprove.outputText1}" id="outputText1" value="#{currentRow['category']}"/>
                 <f:facet name="header">
                 <h:outputText binding="#{event$EventsToApprove.outputText2}" id="outputText2" value="Category"/>
                 </f:facet>
                 </h:column>
                 <h:column binding="#{event$EventsToApprove.column2}" id="column2">
                 <h:outputText binding="#{event$EventsToApprove.outputText3}" id="outputText3" value="#{currentRow['eventName']}"/>
                 <f:facet name="header">
                 <h:outputText binding="#{event$EventsToApprove.outputText4}" id="outputText4" value="Event name"/>
                 </f:facet>
                 </h:column>
                 <h:column binding="#{event$EventsToApprove.column3}" id="column3">
                 <h:outputText binding="#{event$EventsToApprove.outputText5}" id="outputText5" value="#{currentRow['startDate']}"/>
                 <f:facet name="header">
                 <h:outputText binding="#{event$EventsToApprove.outputText6}" id="outputText6" value="Starts"/>
                 </f:facet>
                 </h:column>
                 <h:column binding="#{event$EventsToApprove.column4}" id="column4">
                 <ui:button action="#{event$EventsToApprove.approveButton_action}" id="approveButton1" immediate="true" text="Approve"/>
                 <f:facet name="header">
                 <h:outputText binding="#{event$EventsToApprove.outputText7}" id="outputText7" value="Approve"/>
                 </f:facet>
                 </h:column>
                 </h:dataTable>
                
                


                • 5. Re: a4j:commandLink does not rerender datatable
                  Sergey Smirnov Master

                  so, it is a very important player comes to the scene. It changes everything. At least, the id mentioned in reRender will be corrected.

                  reRender uses the rule of findComponent API method. Because the tree generates the hierarchical ids for its children, the id of the dataTable is not in the same name space with a4j:commandLink. If you have a <h:form id="myform" > around, the reRender should comtain ":myform:eventsDataTable"

                  Check it, and then, we go forward.

                  • 6. Re: a4j:commandLink does not rerender datatable
                    Greg Zoller Newbie

                    I think I'm struggling with the same issue. I have a h:dataTable nested within another h:dataTable. Based on a toggle switch (a4j:commandButton) I want to either show or not show the nested h:dataTable for a listed item.

                    My issue is the same: I want to reRender when the button is clicked. My button is correctly rerendering but the table is not.

                    I read the description above but am not clear how to apply this. I've also tried ForceRerender.

                    Here's some sample code. (Based on the comments in this thread I tried using :col1:projListResults, :deptYear:col1:projListResults, and :deptYear:projListResults. Nothing's worked so far.)

                    Thanks for any hints!
                    Greg

                    <ui:define name="body">
                     <h:form id="deptYear">
                    
                     <h:dataTable id="departmentListResults" width="100%" cellspacing="1"
                     value="#{departmentList.resultList}" var="dept">
                     <h:column id="col">
                     <h:panelGrid columns="2" width="100%" cellspacing="0" cellpadding="0"
                     columnClasses="deptClass1,deptClass2">
                    
                     <a4j:commandButton
                     id="expandList"
                     title="Click here to open or close"
                     reRender="expandList,projListResults"
                     image="#{main.imageMap[dept]}"
                     action="#{main.pressExpandButton(dept)}"
                     >
                     <a4j:ajaxListener type="org.ajax4jsf.ajax.ForceRender" />
                     </a4j:commandButton>
                    
                     <h:outputText value="#{dept.name}" styleClass="highlight"/>
                     </h:panelGrid>
                     <h:dataTable id="projListResults" width="100%" cellspacing="1"
                     value="#{dept.projects}" var="proj"
                     rendered="#{main.imageMap[dept]=='img/arrow_open.gif'}">
                     <h:column>
                     <h3>Hey! #{main.imageMap[dept]}</h3>
                     </h:column>
                     </h:dataTable>
                     </h:column>
                     </h:dataTable>
                     </h:form>
                    
                     <div class="actionButtons">
                     <s:button view="/DepartmentEdit.xhtml"
                     id="create"
                     value="Create Department"
                     rendered="#{s:hasRole('ADMIN')}"
                     propagation="none"/>
                     </div>
                    </ui:define>
                    </ui:composition>
                    


                    • 7. Re: a4j:commandLink does not rerender datatable
                      Claudionor Junior Newbie

                      Hi. Try to surround the DataTable tag with the tag <a4j:outputpanel> with the attributes like this ajaxRendered="true" and layout="block".

                      This resolved my problem.

                      It seems to be a bug within the integration of ajax4jsf and MyFaces/Tomahawk dataTable component.

                      Another tip: when using a commandLink in a DataTable and the action of the commandLink doesn´t work, try to specify the attribute preserveDataModel(tomahawk) of the dataTable to true.

                      Hope this can help you.
                      Thanks.