Conditionally wrap HTML elements

Question

In my Seam application, I have a Seam component that returns a (@Datamodel) list of items I want to transform into a set of <li> HTML elements. I have this working without a problem.

But now, I want to split up the list according to an EL expression. So the EL expression determines if a new <ul> element should be started. I tried the following:

<s:fragment rendered="#{action.isNewList(index)}">
  <ul>
</s:fragment>
<!-- stuff that does the <li>'s goes here -->
<s:fragment rendered="#{action.isNewList(index)}">
  </ul>
</s:fragment>

But that's invalid, because the nesting for <ul> is wrong.

How should I do this?

Answer 1

I'm not familiar with the Seam Framework, but if I understand the problem correctly something like this might work.

<!-- before your loop, open your first <ul> if the (@Datamodel) is not empty -->

<s:fragment rendered="#{action.isNewList(index)}">
  </ul>
  <ul>
</s:fragment>
<!-- stuff that does the <li>'s goes here -->

<!-- after your loop, close your last </ul> if the (@Datamodel) is not empty -->

Answer 2

I'm not familiar with Seam specifically, but I've seen this same problem come up when working with XSLT and other XML-based frameworks.

There are generally two solutions:

1. Rethink your page and data architecture so that the entire list written depending on a single condition. This may require a loop inside the s:fragment.
2. Wrap the offending non-valid fragment html in a <![CDATA[ ... ]]>

Answer 3

You should have something like this (i will use pseudo code):

<ul>
    <s:for items="itemList" ...>

      <s:fragment rendered="#{action.isNewList(index) && index > 0}">
        </ul>
        <ul>
      </s:fragment>
      <li>
        <!-- stuff that does the <li>'s goes here -->
      </li>

    </s:for>
</ul>

Answer 4

You can do this using the JSF <f:verbatim> tag, which isn't pretty but works:

<f:verbatim rendered="#{action.isNewList(index)}">
  &lt;ul&gt;
</f:verbatim>
<!-- stuff that does the <li>'s goes here -->
<f:verbatim rendered="#{action.isNewList(index)}">
  &lt;/ul&gt;
</f:verbatim>