⁠4.2. Rendering

⁠4.2.1. render

The render attribute provides a reference to one or more components on the page that need updating after an Ajax interaction. It uses the UIComponent.findComponent() algorithm to find the components in the component tree using their id identifiers as a reference. Components can be referenced by their id identifier alone, or by their clientId identifier to make locating components more efficient. Example 4.1, “render example” shows both ways of referencing components. Each command button will correctly render the referenced panel grids, but the second button locates the references more efficiently with explicit clientId paths.
⁠

Example 4.1. render example

​<h:form id="form1">
​    <a4j:commandButton value="Basic reference" render="infoBlock, infoBlock2" />
​    <a4j:commandButton value="Specific reference" render=":infoBlock,:sv:infoBlock2" />
​</h:form>
​
​<h:panelGrid id="infoBlock">
​    ...
​</h:panelGrid>
​
​<h:form id="sv">
​    <h:panelGrid id="infoBlock2">
​        ...
​    </h:panelGrid>
​</h:form>
The value of the render attribute can also be an expression written using JavaServer Faces' Expression Language (EL); this can either be a Set, Collection, Array, or String.

Note

JSF evaluates all parameters during page rendering. As such, during a request from a page, all execute and render values are passed to the server from the client. In contrast, RichFaces evaluates these options at the server side during the current request.
This means that with JSF, making changes during a request to a render value defined with EL will not influence the request. RichFaces, however, will always use the newer values.
The RichFaces approach additionally increases data integrity. Parameters that are changed from the client side are re-evaluated on the server, where they cannot be changed.

Important

A common problem with using render occurs when the referenced component is conditionally rendered via the rendered attribute. If a component is not initially rendered, it does not have any HTML representation in the Document Object Model (DOM). As such, when RichFaces renders the component via Ajax, the page does not update as the place for the update is not known.
To work around this issue, wrap the component to be rendered in an <a4j:outputPanel> component. The <a4j:outputPanel> component will receive the update and render the component as required.

⁠4.2.2. ajaxRendered

A component with ajaxRendered="true" will be re-rendered with every Ajax request, even when not referenced by the requesting component's render attribute. This can be useful for updating a status display or error message without explicitly requesting it.
The ajaxRendered attribute's functionality is the basis for the <a4j:outputPanel> component. The <a4j:outputPanel> component is designed to mark parts of the page for automatic updating. Refer to Section 7.1, “<a4j:outputPanel>” for details.
Automatic rendering of such components can be repressed by adding limitRender="true" to the requesting component, as described in Section 4.2.3, “limitRender”.

⁠4.2.3. limitRender

RichFaces Ajax-enabled components and Ajax behaviors with limitRender="true" specified will not cause components with ajaxRendered="true" to re-render, and only those components listed in the render attribute will be updated. This essentially overrides the ajaxRendered attribute in other components.
Example 4.3, “Data reference example” describes two command buttons, a panel grid rendered by the buttons, and an output panel showing error messages. When the first button is clicked, the output panel is rendered even though it is not explicitly referenced with the render attribute. The second button, however, uses limitRender="true" to override the output panel's rendering and only render the panel grid.
⁠

Example 4.2. Rendering example

​<h:form id="form1">
​    <a4j:commandButton value="Normal rendering" render="infoBlock" />
​    <a4j:commandButton value="Limited rendering" render="infoBlock" limitRender="true" />
​</h:form>
​
​<h:panelGrid id="infoBlock">
​    ...
​</h:panelGrid>
​
​<a4j:outputPanel ajaxRendered="true">
​    <h:messages />
​</a4j:outputPanel>