CODEWITHSUNDEEP
javahtmljsffacelets
braveterry
braveterry

Reputation: 3744

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

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.

Upvotes: 9

Views: 3947

Answers (3)

BalusC
BalusC

Reputation: 1108702

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

Upvotes: 13

Colin Gislason
Colin Gislason

Reputation: 5589

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.

Upvotes: 2

Bozho
Bozho

Reputation: 597076

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 -

Upvotes: 2

Related Questions