CODEWITHSUNDEEP
htmljsfprimefacespass-through
mheppler9d
mheppler9d

Reputation: 169

JSF Pass-Through Elements Causes Stray End Tags

In my JSF project, I am trying to use a JSF pass-through, to utilize HTML5-compatible markup, rather than a PrimeFaces component. But it seems to be causing extra closing tags for empty elements, like hr, img, br, that break my layout.

Here is my code, in it's entirety.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:jsf="http://xmlns.jcp.org/jsf">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>JSF Passthrough Test</title>
</head>
<body>
    <form>
        <input id="inputSearch" size="40" value=""/>
        <button type="button" class="btn btn-default" jsf:id="searchbutton">
            <span class="glyphicon glyphicon-search"></span> Find
        </button>
    </form>
    <img src="http://i.imgur.com/atz81.jpg" alt="Cat + Unicorn"/>
</body>
</html>

What this delivers to the browser is an extra closing img tag for the image that I have after it. (If I move the image before the button, no problem.)

<img src="http://i.imgur.com/atz81.jpg" alt="Cat + Unicorn" />
</img>

Is there something I am missing or doing wrong here? Thanks.

Upvotes: 2

Views: 621

Answers (1)

Guerino Rodella
Guerino Rodella

Reputation: 370

there! I created a project copying your code lines. I got no extra img tag rendered on DOM, but, it rendered me an JSF warning message. Is this message you're reffering?

If so, the reason is you're missing some JSF atributes in your HTML5 tags like jsf:id for your form, head and body tags. If you don't specify any jsf atribute, the JSF will ignore this tag and won't convert it to an JSF equivalent. So, try the following changes into your code:

<head jsf:id="head">
    <!-- YOUR HEADER TAGS HERE  -->
</head>

<body jsf:id="body">
       <form jsf:id="frmMain">
          <!-- YOUR BODY TAGS GOES HERE -->
       </form>
</body>

A note, your input don't specify any jsf atribute. So, it's not rendered as JSF component. And, you didn't linked the bootsrap CSS/JS into your page. I assume you just ommited it.

Well, I hope it helps you. CYA!

Upvotes: 1

Related Questions