h:commandLink is being corrupted by rich:datascroller

Question

I am using richfaces 3.2.3 and I have faced one interesting bug in following:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
            xmlns:s="http://jboss.com/products/seam/taglib"
            xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:rich="http://richfaces.org/rich" xmlns:a4j="http://richfaces.org/a4j">
<f:subview>
    <a4j:outputPanel id="commentariesAjaxContainer" ajaxRendered="true">
        <rich:dataTable id="commentaries" var="commentary"
                        value="#{someBean.commentaries}" rows="10" rowClasses="odd-row, even-row"
                        styleClass="stable"
                        reRender="commentariesDS">
            <f:facet name="header">
                <h:outputText
                        value="#{messages['commentaries.title']}"/>
            </f:facet>

            ...
            <rich:column width="10%" styleClass="rich-grid-edit-column">
                <f:facet name="header">
                    <h:outputText
                            value="#{messages['historic.commentary.action']}"/>
                </f:facet>
                <h:panelGroup>
                    <h:commandButton id="commentaryactioneditLnk" styleClass="image-edit-copy-delete"
                                     image="/img/edit16x16px.png"
                                     value="#{messages['historic.commentary.action.edit']}"
                                     action="#{someBean.editCommentary()}"/>
                </h:panelGroup>
            </rich:column>
        </rich:dataTable>
        <rich:datascroller fastControls="hide"
                           id="commentariesDS" for="commentaries" renderIfSinglePage="false">
            <ui:include src="layout/rich-datascroller-facets.xhtml"/>
        </rich:datascroller>
    </a4j:outputPanel>

    <h:commandLink action="#{someBean.createCommentary()}">
        <h:panelGrid columns="2">
            <h:panelGroup>
                <h:outputText styleClass="image-link-label-medium"
                              value="#{messages['customerCare.historic.commentary.action.create']}"/>
            </h:panelGroup>
            <h:panelGroup>
                <h:graphicImage value="img/buttons/add_a_comment_icon-24x24.png"/>
            </h:panelGroup>
        </h:panelGrid>
    </h:commandLink>
</f:subview>
</ui:composition>

So, the command link appears as link with nested label and icon. It works fine until I click on rich:datascroller button - after the data table is rerendered via ajax request, my link gets corrupted - all nested elements become it's siblings, not children (and hence - the link becomes empty). It is even more strange because h:commandLink is not a child of rich:dataTable!

Could you please help me to solve this? And it would be great to know what is the root of this problem

have you tried to replace <div> inside h:commandLink by <span> — faissal
That is not the root of problem - actually, there is no difference whether it is a div, table, or span. — Serga
I did not manage to locate the problem, so I had to apply workaround - I simply removed child elements from h:commandLink, and simply made image css background of a link — Serga

faissal faissal · Accepted Answer · 2013-03-20T13:27:53

I think the problem is in the oncomplete call because it's making "As I understand" some changes in the page :

<rich:datascroller oncomplete="_globalTsmModule.renderGlobalMessagesBlock();"...

You can use ajax status for this component like :

<a4j:status id="a4jstatus" onstop="_globalTsmModule.renderGlobalMessagesBlock();"/>

h:commandLink is being corrupted by rich:datascroller

1 Answers