a4j:commandLink does not rerender datatable

[mglowacki]

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

[sergeysmirnov]

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/

[mglowacki]

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

[sergeysmirnov]

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

[mglowacki]

<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>

[sergeysmirnov]

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.

[gzoller]

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>

[claudionor]

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.