Is it possible to change the element id separator in JSF?
facelets, html, java, jsf
Solution
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?
Problem
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.