Is it possible to change the element id separator in JSF?

Question

For example, the following snippet:

<h:form id="levelone">
    <h:inputText id="leveltwo" value="Test" />
</h:form>

generates the following markup:

<form id="levelone" name="levelone" method="post" action="/test/testPage.html" 
      enctype="application/x-www-form-urlencoded">
   <input id="levelone:leveltwo" type="text" name="levelone:leveltwo" 
          value="Test" />
</form>

Is it possible to change the automatically generated ids to use a different separator than colon?

For example, I'd like to change

levelone:leveltwo

to

levelone-leveltwo

Background

We're using the Mojo JavaScript application framework in our webapp, and it doesn't seem to like the colons in the id's.

Discontinue

Answer 1

This is not possible in JSF 1.x, but since JSF 2.x you can define it in web.xml as init-param of javax.faces.SEPARATOR_CHAR.

That said, I guess that you just wanted to change it because you'd like to get your CSS to work, is it? The colon : is namely a special character in CSS identifiers, it represents a pseudo selector. If this reason is true for you, then it might be good to know that you can escape special characters in CSS the usual way by \.

Thus, e.g.

#levelone\:leveltwo {
    color: blue;
}

ought to work for normal browsers (for IE6/7 you need #levelone\3A leveltwo instead).

The same applies when you intend to use it with jQuery or any other JavaScript framework which selects elements with help of CSS selectors:

var leveltwo = $('#levelone\\:leveltwo');

Alternatively, you can also just give it a styleClass which you in turn can correlate with a CSS class. Thus, e.g.

<h:inputText styleClass="myinput" />

which generates

<input type="text" class="myinput" />

can be styled with

.myinput {
    color: blue;
}

See also

• How to select JSF components using jQuery?
• How to use JSF generated HTML element ID with colon ":" in CSS selectors?

Morceau

Answer 2

In older versions, no it is not possible. It is a hard coded constant. In 2.0, you can change it. See this blog post.

Marin

Isn't 2.0 a current version? It was already final for more than half a year. – Morceau

Sorry, not sure what I was thinking. I'm stuck on an old version, maybe that's why. I'll fix it. – Marin

Answer 3

Tomahawk has extended components, like <t:inputText> which have the forceId attribute. There you'll have to set it as <t:inputText forceId="levelone-leveltwo" /> - i.e. you won't be able to use the automatic generated container(s) name.

I'd advise against such a thing - I don't see a valid reason why the : should be changed to -

Saxtuba