[SOLVED] <h:message for="foo"> does not seem to work on <section id="foo">

<h:message for="foo"> does not seem to work on <section id="foo">

I have defined this:

   <ui:define name="content">
        <section id="documents">
....
            <h:message for="documents" errorClass="errorc" />
        </section>

This is inside a <body><main> tags in the upper template.

Then my controller does this:

} catch (MyException e) {
            ctx.addMessage("documents", new FacesMessage(FacesMessage.SEVERITY_ERROR, "Trying to raise an error", null));
        }

But the error is not shown in the h:message. I assume I am using wrongly the target ID, but I don't know how to do it. I have tried to move the h:message outside the section but doesn't work either.

I could only make it work with general h:messages with null client ID

Solution

From the <h:message> documentation (emphasis mine):

for

Client identifier of the component for which to display messages.

The <section> tag is a plain HTML element, not a Faces component.

Add faces:id to convert it to a Faces passthrough element:

<... xmlns:faces="jakarta.faces">

   <ui:define name="content">
        <section faces:id="documents">
            ...
            <h:message for="documents" errorClass="errorc" />
        </section>

Or when you're not on Faces 4.0 yet:

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

   <ui:define name="content">
        <section jsf:id="documents">
            ...
            <h:message for="documents" errorClass="errorc" />
        </section>

Or when you're not on JSF 2.2 yet then your best bet is to use e.g. <h:panelGroup layout="block"> component to let JSF generate a <div> element.

<...>

   <ui:define name="content">
        <h:panelGroup layout="block" id="documents">
            ...
            <h:message for="documents" errorClass="errorc" />
        </h:panelGroup>

The last alternative is to create a custom component generating <section>.