a4j:outputPanel is rendered as a <span> html element if the 'layout' attribute is equal 'inline' (default value) or as a <div> html element if layout="block". You can use this component for a layout purpose even if the page has no Ajax functionality.

If Ajax functionality presents on the page, the component offers two additional features:

• Marking the area of the page as automatically re-rendered on each Ajax request event without any necessity to mentioned this area in the reRender attribute of Ajax component. Attribute ajaxRendered="true" turn on this feature. Note, that the effect of using ajaxRendered="true" still might be overridden with the limitToList attribute of the Ajax component or renderRegionOnly attribute of the a4j:region component.
• Marking the placeholder for any JSF component in case of it is not rendered due to rendered="false". This might be important when the component becomes rendered during the next Ajax response. As soon as the placeholder is unknown, the rendered component doesn't appear on a page. To turn on the feature for marking the placeholder, you need to have the attribute layout="none".

When layout="none", the span style="display:none" is rendered and assigns the id of the child component if the component is not rendered. Otherwise, it does not become rendered at all.
The following example shows the cases of usage described above:

OutputPanel example

This code does not work as expected. The expected echo text does not appear below even the condition for 'renderer' returns true. Also, the error message does not appear when the length of the text reaches the limit.	This code works properly. The h:message is marked for update during each Ajaxrequest/response. The place for bottom label is reserved with outputPanel while the component is not rendered.
Enter Text:	Enter Text:

HideView Source

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
            
    <style type="text/css">
        .col {
            width:50%;
            padding:10px;
            padding: 0px 30px 0px 0px;
            vertical-align: top;
        }
    </style>            
            
    <br/> 
            
    <h:panelGrid columns="2" width="100%" columnClasses="col">

            <h:panelGroup>
                This code does not work as expected. The expected echo text does not appear
                below even the condition for <code>'renderer'</code> returns <code>true</code>.
                Also, the error message does not appear when the length of the text reaches the limit.
            </h:panelGroup>

            <h:panelGroup>
                This code works properly. The <code>h:message</code> is marked for update during
                each Ajaxrequest/response. The place for bottom label is reserved with
                <code>outputPanel</code> while  the component is not rendered.
            </h:panelGroup>

            <a4j:outputPanel layout="block">

                <h:message for="text1" style="color:red" />
            
                <a4j:outputPanel layout="block">
                    <h:form>
                        <h:outputText style="font-weight: bold;" value="Enter Text: "/>
                        <h:inputText id="text1" label="text1" value="#{rsBean.text1}">
                            <f:validateLength maximum="10"/>
                            <a4j:support event="onkeyup" reRender="out1" />
                        </h:inputText>
                    </h:form>
                </a4j:outputPanel>
                
                <h:outputText id="out1" rendered="#{not empty rsBean.text1}" value="Approved Text: #{rsBean.text1}" />

            </a4j:outputPanel>


            
            <a4j:outputPanel layout="block">

                <a4j:outputPanel ajaxRendered="true">
                    <h:message for="text2" style="color:red" />
                </a4j:outputPanel>
            
                <a4j:outputPanel layout="block">
                    <h:form>
                        <h:outputText style="font-weight: bold;" value="Enter Text: "/>
                        <h:inputText id="text2" label="text2" value="#{rsBean.text2}">
                            <f:validateLength maximum="10"/>
                            <a4j:support event="onkeyup" reRender="out2" />
                        </h:inputText>
                    </h:form>
                </a4j:outputPanel>
                
                <a4j:outputPanel id="out2">
                    <h:outputText rendered="#{not empty rsBean.text2}" value="Approved Text: #{rsBean.text2}" />
                </a4j:outputPanel>
            </a4j:outputPanel>
    </h:panelGrid>

    <br/>

</ui:composition>

<<Hide Source