RichFaces Showcase

Ajax Action

a4j:ajax

a4j:commandButton

a4j:commandLink

a4j:actionListener

a4j:jsFunction

a4j:poll

a4j:push

a4j:param

Ajax Queue

a4j:queue

a4j:attachQueue

Ajax Output/Containers

a4j:outputPanel

a4j:status

a4j:region

a4j:mediaOutput

a4j:log

Validation

Client Side Validation

rich:graphValidator

rich:message

rich:messages

rich:notify

Data Iteration

a4j:repeat

rich:dataTable

rich:extendedDataTable

rich:collapsibleSubTable

rich:dataScroller

rich:list

rich:dataGrid

Trees

rich:tree

Tree Adaptors

Output/Panels

rich:chart

rich:panel

rich:togglePanel

rich:tabPanel

rich:collapsiblePanel

rich:accordion

rich:popupPanel

rich:progressBar

rich:tooltip

Menus

rich:panelMenu

rich:toolbar

rich:contextMenu

rich:dropDownMenu

Inputs

rich:autocomplete

rich:calendar

rich:editor

rich:inputNumberSlider

rich:inputNumberSpinner

rich:inplaceInput

rich:fileUpload

Selects

rich:inplaceSelect

rich:select

rich:orderingList

rich:pickList

Drag and Drop

Miscellaneous

Standard elements skinning

rich:placeholder

RichFaces functions

rich:focus

rich:componentControl

rich:hashParam

rich:hotKey

rich:jQuery

VDL documentation
Component Reference

The a4j:outputPanel component provides the following features:

Automatic updating of any child content during Ajax requests
A wrapper component for conditional rendering of nested elements through Ajax
Configurable layouts:
- inline, rendered as a span element.
- block, rendered as div element.
- none, special layout for nested components with conditional rendering cases.

This code does not work as expected. The expected echo text does not appear below even the condition for `'rendered'` 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:

View Source

<!DOCTYPE html>
<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:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
    <h:outputStylesheet>
        .col {
            width: 50%;
            padding: 10px;
            padding: 0px 30px 0px 0px;
            vertical-align: top;
        }
    </h:outputStylesheet>
    <h:panelGrid columns="2" width="100%" columnClasses="col">

        <f:verbatim>
            This code does not work as expected. The expected echo text does not appear
            below even the condition for <code>'rendered'</code> returns <code>true</code>.
            Also, the error message does not appear when the length of the text reaches the limit.
        </f:verbatim>
        <f:verbatim>
            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.
        </f:verbatim>

        <a4j:outputPanel layout="block">


            <a4j:outputPanel layout="block">
                <h:form>
                    <h:message for="text1" style="color:red" />

                    <h:outputText style="font-weight: bold;" value="Enter Text: " />
                    <h:inputText id="text1" label="text1" value="#{opBean1.text}">
                        <f:validateLength maximum="10" />
                        <a4j:ajax event="keyup" execute="@this" render="out1" onerror="return false;" />
                    </h:inputText>

                    <h:outputText id="out1" rendered="#{not empty opBean1.text}" value="Approved Text: #{opBean1.text}" />
                </h:form>
            </a4j:outputPanel>

        </a4j:outputPanel>

        <a4j:outputPanel layout="block">
            <h:form>
                <a4j:outputPanel layout="block" ajaxRendered="true">
                    <h:message for="text2" style="color:red" />
                </a4j:outputPanel>

                <h:outputText style="font-weight: bold;" value="Enter Text: " />
                <h:inputText id="text2" label="text2" value="#{opBean2.text}">
                    <f:validateLength maximum="10" />
                    <a4j:ajax event="keyup" execute="@this" render="out2" />
                </h:inputText>

                <a4j:outputPanel id="out2" layout="block">
                    <h:outputText rendered="#{not empty opBean2.text}" value="Approved Text: #{opBean2.text}" />
                </a4j:outputPanel>
            </h:form>
        </a4j:outputPanel>
    </h:panelGrid>
</ui:composition>