CODEWITHSUNDEEP
jsfconditional-rendering
Anastasios Vlasopoulos
Anastasios Vlasopoulos

Reputation: 1802

Conditionally render a <div> based on value of <h:outputText>

I am using jsf primefaces. I want to display an image depending on the value of a specific outputext. If the text value is 'Alarm *' then a div will appear whith a spesific image. If the value is 'Alarm **' then a div with an other image will appear, etc. I tried the code below but it does not work for me.

<h:outputText id="alarmCriticalityValue" value="#{msg[summary.criticality.key]}" />

<c:if test="#{alarmCriticalityValue=='Alarm *'}">
   <div class="alarm1"></div>
</c:if>

How should i implement this idea?

Upvotes: 3

Views: 4129

Answers (3)

Bigmwaj
Bigmwaj

Reputation: 391

Try this 

<h:outputText id="alarmCriticalityValue" value="#{msg[summary.criticality.key]}" />
    <h:panelGroup layout="block" styleClass="alarm1" rendered="#{alarmCriticality.value eq 'Alarm *'}" />

Upvotes: 1

BalusC
BalusC

Reputation: 1108702

You need to use binding attribute to put the UIComponent instance in the EL scope. The id attribute doesn't do that, on contrary to what you expected.

<h:outputText binding="#{alarmCriticality}" ... />

And then you need to use UIOutput#getValue() to obtain its value attribute.

<c:if test="#{alarmCriticality.value == 'Alarm *'}">

That said, you'd better use rendered attribute here, particularly if #{summary} represents the currently iterated item of a JSF iterating component like <ui:repeat> or <h:dataTable>.

<h:panelGroup layout="block" styleClass="alarm1"
    rendered="#{alarmCriticality.value == 'Alarm *'}" />

See also:

Unrelated to the concrete problem. It's strange to see the conditional rendering depend on localized text. What if you change the locale and/or the localized text? This is very brittle. You'd better check the bundle key instead.

<h:outputText value="#{msg[summary.criticality.key]}" />
<h:panelGroup layout="block" styleClass="alarm1" 
    rendered="#{summary.criticality.key == 'some.alarm.key'}" />

This way you also don't need to bind the output text anymore.

Upvotes: 4

Syren Baran
Syren Baran

Reputation: 444

Try

<c:if test="#{msg[summary.criticality.key].equals('Alarm *')}">

Or add a binding to the h:outputText and check against that.

Upvotes: 1

Related Questions