Is it possible to update non-JSF components (plain HTML) with JSF ajax?

ajax, html, jsf, jsf-2

Solution

Is it possible to update parts of my page that are not JSF components?

No. The to-be-updated component has to be available by `UIViewRoot#findComponent()`, so that JSF can find them, invoke `encodeAll()` on it, capture the generated HTML output and pass back it in the ajax response so that JavaScript can update the HTML DOM tree with it. Plain HTML elements are not represented as real `UIComponent` instances in the JSF component tree, so JSF already cannot locate them in first place.

For example, can I update a plain HTML `<div>` or do I need to wrap that in a JSF component?

You need to wrap it in a JSF component like `<h:panelGroup>`. You can however just use `<h:panelGroup layout="block">` to represent a real `<div>` in JSF. This way you don't need to wrap the `<div>` in another JSF component.

<h:panelGroup layout="block" id="foo">
    ...
</h:panelGroup>

Since JSF 2.2 you can use new passthrough elements feature with `jsf:id` attribute to declare HTML(5) elements as JSF components.

<... xmlns:jsf="http://xmlns.jcp.org/jsf">

<div jsf:id="foo">
    ...
</div>

<main jsf:id="bar">
    ...
</main>

<section jsf:id="baz">
    ...
</section>

They will render their output as-is, but under the covers be a concrete `UIPanel` instance.

There's however one corner case in case of composite components. You can use the following approach to have a HTML element which is updateable by ajax.

<cc:implementation>
    <span id="#{cc.clientId}">
        ...
    </span>
</cc:implementation>

The explanation that this approach works is because even though the composite component does not render itself to the HTML output, it is by itself available by `UIViewRoot#findComponent()`.

See also:

- How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"

- Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?

- Rerendering composite component by ajax

Problem

Is it possible to update parts of my page that are not JSF components? For example, can I update a plain HTML `<div>` or do I need to wrap that in a JSF component?

Original source

Related problems