Ajax-render a table which is inside a different form

I am facing a problem rendering a data table when selecting a date from <rich:calendar>. I use <a4j:ajax> for the rendering but with no effect. Here is the code sample:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:composite="http://java.sun.com/jsf/composite">

    <rich:panel header="#{lang.reportPanelHeader}" id="panel" rendered="#{navigation.reportRendered}" width="700px" style="margin-left:250px">
        <a4j:status onstart="#{rich:component('statPane')}.show()" onstop="#{rich:component('statPane')}.hide()" />
        <h:form id="data_table_form">
            <rich:dataTable value="#{validateReportAction.reportList}" var="report" iterationStatusVar="it" id="data_table" rows="5">
               <rich:column>
                   <f:facet name="header">#</f:facet>
                   #{it.index  + 1}
               </rich:column>

               <rich:column>
                   ....
               </rich:column>

                <f:facet name="footer">
                    <rich:dataScroller page="#{validateReportAction.page}" />
                </f:facet>
            </rich:dataTable>
        </h:form>

        <rich:popupPanel id="statPane" autosized="true" style="border: none; background-color: #e6e6e6;">
            ....
        </rich:popupPanel>

        <div id="bottom">
            <h:form id="calendarForm">
                <div id="left">                
                    <div class="input" id="test_cal">
                        <rich:calendar 
                            dataModel="#{calendarModel}"
                            value="#{validateReportAction.selectedDate}"
                            boundaryDatesMode="scroll"
                            required="true" 
                            requiredMessage="#{lang.dateRequiredMsg}" 
                            mode="ajax"
                            id="date"
                            datePattern="dd.MM.yyyy"
                            popup="false">

                            <a4j:ajax event="change" render="@all"/>

                        </rich:calendar>

                        <span class="error_msg">
                            <rich:message for="date" ajaxRendered="true"/>
                        </span>
                    </div>
                </div>
            </h:form>
        </div>
    </rich:panel>

</ui:composition>

I am forced to use @all in the calendar in <a4j:ajax event="change" render="@all"/> but I want to render only the data table. How can I do this?

Solution

Since it's located in a different naming container parent, you need to refer it by its absolute client ID. To find it out, open the page in the webbrowser. Rightclick and View Source. Locate the HTML <table> element which is generated by <rich:dataTable id="data_table">. It'll look something like this:

<table id="data_table_form:data_table">

You need to take exactly that ID, prefix with the JSF naming container separator character (which defaults to :) and use it in the render attribute.

<a4j:ajax event="change" render=":data_table_form:data_table" />

Ajax-render a table which is inside a different form

See also: