How to conditionally render plain HTML elements like <div>s?

Question

I'm trying to implement a composite component which either displays the information details of a user in plain text or displays them through editable input texts fields if the desired details are those of the user currently connected.

I know that al UI Components can be rendered via the rendered attribute but what about the ones which are not UI Components (for example divs)

<div class = "userDetails" rendered = "#{cc.attrs.value.id != sessionController.authUser.id}">     Name: #{cc.attrs.value.name}     Details: #{cc.attrs.value.details} </div>  <div class = "userDetails" rendered = "#{cc.attrs.value.id == sessionController.authUser.id}">     <h:form>         ...     </h:form> </div> 

I know that the div doesn't have the rendered attribute and probably I'm not taknig the right approach at all. I could very easily use an JSTL tag but I want to avoid that.

Answer 1

The right JSF component to represent a HTML <div> element is the <h:panelGroup> with the layout attribute set to block. So, this should do:

<h:panelGroup layout="block" ... rendered="#{someCondition}">     ... </h:panelGroup> 

Alternatively, wrap it in an <ui:fragment>:

<ui:fragment rendered="#{someCondition}">     <div>         ...     </div> </ui:fragment> 

Or when you're already on JSF 2.2+, make it a passthrough element:

<div jsf:rendered="#{someCondition}">  </div> 

Do note that when you'd like to ajax-update a conditionally rendered component, then you should be ajax-updating its parent component instead.

See also:

• Alternative to ui:fragment in JSF
• Conditional rendering of non-JSF components (plain vanilla HTML and template text)
• Ajax update/render does not work on a component which has rendered attribute
• Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?
• Is it possible to update non-JSF components (plain HTML) with JSF ajax?