问题
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.
回答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?
回答2:
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 -
回答3:
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.
来源:https://stackoverflow.com/questions/2142929/is-it-possible-to-change-the-element-id-separator-in-jsf