33

I know what prependId="false" does. It set the flag so that the id of the form does not prepend the id of the form child, but why? any particular reason why you do or dont want to prepend id?

Kukeltje
  • 12,223
  • 4
  • 24
  • 47
Thang Pham
  • 38,125
  • 75
  • 201
  • 285
  • 1
    Related: http://stackoverflow.com/questions/7415230/jsf-namingcontainer-and-uiform-with-prependid/ tl;dr: just don't use it, ever. – BalusC Jun 17 '15 at 13:00

5 Answers5

41

In my experience, I never use this attribute. However, in some cases it can be useful.

When you use Facelets, you can create templates or include pages inside another page. So you can imagine that a page could be included in several different pages. Take the example where the parent pages contain a form, with different id:

Page 1:

<h:form id="form1">
    <ui:include src="pages/my-page.xhtml"/>
    ...
</h:form>

Page 2:

<h:form id="form2">
    <ui:include src="pages/my-page.xhtml"/>
    ...
</h:form>

Now, in the my-page.xhtml, you have a <h:inputText id="foo"/>. In the first case, the real ID of the input will be form1:foo, while in the second case, it will be form2:foo. This could create complex situations if you need a direct access to this component in Javascript or in Java (using findComponent("...") method).

If you use prependId="false" (or on some components forceId="true"), the real ID will be simply foo, and then your code will be simpler as you will not have to care about the container of the input field.

However, you will have to use this attribute carefully, as you may get a duplicate ID error if you use this prepend attribute too often...

In modern jsf versions it might also break ajax, see UIForm with prependId="false" breaks <f:ajax render>

Kukeltje
  • 12,223
  • 4
  • 24
  • 47
Romain Linsolas
  • 79,475
  • 49
  • 202
  • 273
  • 7
    Agreed. However, JS access can be simplified if you're using the `this` keyword the smart way :) – BalusC Oct 19 '10 at 23:05
  • With prependId="true", component id are prefixed with the formName. This is usefull if you have multiple component with same id in two different formsin the same .xhtml file. – bilelovitch May 08 '17 at 18:29
8

I prefer to add prependId occasionally to make styling elements via their ID classes easier. For example, a form:

<h:form id="myform" ... >
    <h:inputText id="mytext" ... />
</h:form>

Would give you an ID of myform:mytext. As the colon is reserved in CSS, you have to escape the CSS to read something like #myform\:mytext { ... } which I prefer not to do. With prependId="false" I get to use just #mytext { ... } which is much simpler & nicer to read. It also plays nicer with CSS preprocessors like LESS or Sass.

Lee Theobald
  • 8,461
  • 12
  • 49
  • 58
  • 5
    An alternative would be to use javax.faces.SEPARATOR_CHAR - this allows you to use another separator character instead of ":". – sleske May 23 '12 at 08:28
  • For clarification: @Lee Theobald obviously meant "colon" when saying "As the semi-colon...". – codefan-BK May 25 '15 at 17:38
  • That I did. Fixed the answer appropriately. – Lee Theobald Jun 17 '15 at 12:48
  • @Lee Theobald, in your answer, should it not be prependId="false" for getting #mytext or is it correct, because AFAIK prependId="true" is by default ? Please clarify – A_J Jul 30 '15 at 04:17
  • Yep, you're right. I managed to make quite a few typos in this answer! The point stands though :) I'll correct it appropriately. – Lee Theobald Jul 30 '15 at 07:59
  • There's a better approach to achieve the same goal. Use `styleClass` to assign CSS classes to the components. JSF never modifies the CSS class names, and as a side effect, you get the semantics right. CSS classes are the natural habitat of CSS rules. – Stephan Rauh Aug 24 '17 at 20:22
8

A situation where prependId=false is useful is in the login form, if you are using Spring Security, because the ids of the inputtexts have to be exactly "j_username" and "j_password". So you shouldn't put the form id before them, and using prependId=false is a good choice to acheive this.

choquero70
  • 4,470
  • 2
  • 28
  • 48
3

One scenario where we have to set this flag is in case of Autocomplete control of primefaces library.

I had to set this flag to false when I was trying AutoComplete control of primefaces library. I was not able to get autocomplete working but after setting this flag it worked fine. You can see this link to my question regarding this problem

WARN [Parameters] Parameters: Invalid chunk ignored. warning coming in primefaces application

Community
  • 1
  • 1
Shekhar
  • 11,438
  • 36
  • 130
  • 186
2

In addition to making for CSS selectors easier, using prependId=false makes it easier to use JavaScript and jQuery to access specific elements.

Otherwise, without using RichFaces, to get at an elmement by id using jQuery you'll have to use an ugly escape sequence like:

jQuery("form-id\\:element-id")
Will Durman
  • 67
  • 1
  • 9
  • 1
    Use CSS pseudo classes. JSF never modifies the class names, so you can simply access the attribute using `$(.myClass)`. – Stephan Rauh Aug 24 '17 at 20:24