How to use JSF h:messages better?

Question

My Objective is to use h:messages to convey user - error and confirmation messages.The CSS styles to show these two different messages are different, In fact I would like to use an image beside the confirmation message. for Eg:

<tr> <td><img/></td><td><h:msg></td> </td>.

So I tried to add messages to the Faces Context based on 2 different client ids

<tr>
            <td height="5">
                <h:messages style="color:darkred" id="error_message" />
            </td>
        </tr>
        <tr>
            <td width="89%" class="InfoMsg" align="center">
                <h:messages id="confirm_message" />
            </td>
        </tr>

and in the java layer

FacesMessage facesMessage = new FacesMessage(Constants.saveMessageConfirm);
    FacesContext.getCurrentInstance().addMessage(Constants.STATIC_CONFIRM_MSG_CLIENT_ID,  facesMessage);

But, even if i add messages to client Id confirm_message - and only to confirm_message - and not to error_message - The message is shown twice in 2 different styles (refer the HTML above)

2 Questions :

1) What is the problem here?

2) If I want to show the image inside a td in the second tr and conditionaly show that second tr when confirm messages are present - what is the best way?

Thanks,

Answer 1

change <h:messages> to <h:message>

<h:messages displays all messages for the current context, <h:message> displays a specific message.

and I believe you want to change id to for to give it a target, but I could be wrong.

Answer 2

The h:messages displays all messages which are not displayed in any h:message in the page yet. I.e. all messages which are added on a client ID of null or a non-existing input element will end up in h:messages.

You can however set it to only display messages with a null client ID using globalOnly="true".

<h:messages globalOnly="true" />

You can also give the message a different style depending on the FacesMessage.Severity:

<h:messages infoClass="info" errorClass="error" />

with for example this CSS which hides the INFO messages and makes ERROR messages red:

.info {
     display: none;
}
.error {
     color: red;
}

---

To be clear:

facesContext.addMessage("clientId",  facesMessage);

This will attach the given message to a <h:message for="clientId"> not to a <h:messages id="clientId"> as you seem to expect.