How to specify id attribute in JSF

--Environment - CentOS Linux release 7.8.2003 (Core) - Eclipse IDE for Enterprise Java Developers.Version: 2020-03 (4.15.0) - openjdk version "11.0.7" 2020-04-14 LTS - JSF 2.3.9

In JSF, the id attribute value may be output as a value different from the value that was set in xhtml. The book described the name attribute, but the id attribute may also be able to understand the correspondence with the component tree.

FacesServlet generates an HTML file from the component tree and sends it to the browser. Such a transformation is called rendering. Even after rendering to an HTML file, the HTML tags bound to the backing bean are embedded with the name attribute as shown below so that you can see the correspondence with the internal component tree. Number: \ \
Introduction to Easy-to-understand Java EE Web System-Shuwa System

Problem 1: The id attribute does not have the specified value inside the h: form tag

Outside the h: form tag, the id attribute value is as specified.

If ** outOfForm ** is specified for the id attribute value of h: inputText

<h:inputText id="outOfForm" value="Outside the form tag, the id will be as specified" />

The id attribute value of ʻinput` is ** outOfForm **.

output

<input id="outOfForm" type="text" name="outOfForm" value="Outside the form tag, the id will be as specified">

Inside the h: form tag, it becomes "form tag id attribute value: specified id attribute value"

If the id attribute is not specified in the h: form tag, it becomes "automatic attribute value: specified id attribute value".

If you specify ** inOfForm ** for the id attribute value of h: inputText without specifying the id attribute of the h: form tag

<h:form>
  <h:inputText id="inOfForm" value="h:If you do not specify the id attribute in the form tag, "automatic attribute value":It becomes "specified id attribute value"" />
</h:form>

The id attribute value of ʻinput` is ** j_idt5: inOfForm **.

output

<form id="j_idt5" name="j_idt5" method="post" action="/tryJsf/base.jsf" enctype="application/x-www-form-urlencoded">
  <input type="hidden" name="j_idt5" value="j_idt5">
  <input id="j_idt5:inOfForm" type="text" name="j_idt5:inOfForm" value="h:If you do not specify the id attribute in the form tag, "automatic attribute value":It becomes "specified id attribute value"">
  <input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-6757148234097573315:8183558224686661226" autocomplete="off">
</form>

If id attribute is specified in h: form tag, it becomes "id attribute value of form tag: specified id attribute value".

If you specify ** formId ** for the id attribute value of the h: form tag and ** inOfForm ** for the id attribute value of h: inputText

<h:form id="formId">
  <h:inputText id="inOfForm" value="h:If you specify the id attribute in the form tag, "id attribute value of the form tag":It becomes "specified id attribute value"" />
</h:form>

The id attribute value of ʻinput` is ** formId: inOfForm **.

output

<form id="formId" name="formId" method="post" action="/tryJsf/base.jsf" enctype="application/x-www-form-urlencoded">
  <input type="hidden" name="formId" value="formId">
  <input id="formId:inOfForm" type="text" name="formId:inOfForm" value="h:If you specify the id attribute in the form tag, "id attribute value of the form tag":It becomes "specified id attribute value"">
  <input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="1982632179815695771:1244710352148896782" autocomplete="off">
</form>

Solution 1: If prepareId = "false" is specified in the h: form tag, the id attribute value will be the specified value.

prependId Flag indicating whether or not this form should prepend its id to its descendent's id during the clientId generation process. If this flag is not set, the default value is true. JSF 2.2 View Declaration Language: Facelets Variant

A flag that indicates whether the form ID is prepended to its offspring ID during id generation. The default value is true. If you specify ** formId ** for the id attribute value of the h: form tag and ** inOfForm ** for the id attribute value of h: inputText

<h:form id="formId" prependId="false">
  <h:inputText id="inOfForm" value="h:prependId in form tag=If false is specified, the id attribute will be the specified value." />
</h:form>

The id attribute value of ʻinput` is ** inOfForm **.

output

<form id="formId" name="formId" method="post" action="/tryJsf/base.jsf" enctype="application/x-www-form-urlencoded">
  <input type="hidden" name="formId" value="formId">
  <input id="inOfForm" type="text" name="inOfForm" value="h:prependId in form tag=If false is specified, the id attribute will be the specified value.">
  <input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-3193809963809428842:-8198161006116065679" autocomplete="off">
</form>

Problem 2: The id attribute value does not become the specified value inside the ui: repeat tag

It becomes "automatic attribute value: index number: specified id attribute value" both outside and inside the h: form tag.

If ** inOfRepeat ** is specified for the id attribute value of h: inputText

<ui:repeat var="item" varStatus="stat" value="#{idBean.array}">
  <h:inputText id="inOfRepeat#{stat.index}" value="h:Inside the form tag ui:If you use the repeat tag, the id attribute value will not be the specified value" />
</ui:repeat>

The id attribute value of ʻinput` is ** j_idt5: {index number}: inOfRepeat **.

output

<input id="j_idt5:0:inOfRepeat" type="text" name="j_idt5:0:inOfRepeat">
<input id="j_idt5:1:inOfRepeat" type="text" name="j_idt5:1:inOfRepeat">

If the id attribute is not specified in the h: form tag, it will be "automatic attribute value: automatic attribute value: index number: specified id attribute value".

If you specify ** inOfRepeat {index number} ** in the id attribute value of h: inputText without specifying the id attribute of the h: form tag

<h:form>
  <ui:repeat var="item" varStatus="stat" value="#{idBean.array}">
    <h:inputText id="inOfRepeat#{stat.index}" value="h:Inside the form tag ui:If you use the repeat tag, the id attribute value will not be the specified value" />
  </ui:repeat>
</h:form>

The id attribute value of ʻinput` is ** j_idt5: j_idt9: {index number}: inOfRepeat **.

output

<form id="j_idt5" name="j_idt5" method="post" action="/tryJsf/base.jsf" enctype="application/x-www-form-urlencoded">
  <input type="hidden" name="j_idt5" value="j_idt5">
  <input id="j_idt5:j_idt9:0:inOfRepeat" type="text" name="j_idt5:j_idt9:0:inOfRepeat">
  <input id="j_idt5:j_idt9:1:inOfRepeat" type="text" name="j_idt5:j_idt9:1:inOfRepeat">
  <input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="8291831575234858658:4144786523139149206" autocomplete="off">
</form>

When id attribute is specified in h: form tag, it becomes "id attribute value of form tag: automatic attribute value: index number: specified id attribute value".

If you specify ** formId ** for the id attribute value of the h: form tag and ** inOfRepeat {index number} ** for the id attribute value of h: inputText

<h:form id="formId">
  <ui:repeat var="item" varStatus="stat" value="#{idBean.array}">
    <h:inputText id="inOfRepeat#{stat.index}" value="h:Inside the form tag ui:If you use the repeat tag, the id attribute value will not be the specified value" />
  </ui:repeat>
</h:form>

The id attribute value of ʻinput` is ** formId: j_idt9: {index number}: inOfRepeat **.

output

<form id="formId" name="formId" method="post" action="/tryJsf/base.jsf" enctype="application/x-www-form-urlencoded">
  <input type="hidden" name="formId" value="formId">
  <input id="formId:j_idt9:0:inOfRepeat" type="text" name="formId:j_idt9:0:inOfRepeat">
  <input id="formId:j_idt9:1:inOfRepeat" type="text" name="formId:j_idt9:1:inOfRepeat">
  <input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-9123594053057548780:-7376239985257011779" autocomplete="off">
</form>

Even if prepareId = "false" is specified in the h: form tag, the id attribute value does not become the specified value.

Even if you specify prependId =" false " in the h: form tag

<h:form id="formId" prependId="false">
  <ui:repeat var="item" varStatus="stat" value="#{idBean.array}">
    <h:inputText id="inOfRepeat#{stat.index}" value="h:Inside the form tag ui:If you use the repeat tag, the id attribute value will not be the specified value" />
  </ui:repeat>
</h:form>

The id attribute value of the form tag just doesn't stick.

output

<form id="formId" name="formId" method="post" action="/tryJsf/base.jsf" enctype="application/x-www-form-urlencoded">
  <input type="hidden" name="formId" value="formId">
  <input id="j_idt9:0:inOfRepeat" type="text" name="j_idt9:0:inOfRepeat">
  <input id="j_idt9:1:inOfRepeat" type="text" name="j_idt9:1:inOfRepeat">
  <input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-915378070197893309:-5208595187307997788" autocomplete="off">
</form>

Solution 1: Stop jsf tag and write with html tag

Note: It's a shame if you don't write the id attribute value so that it is unique. It's a very delicate measure. If ** inOfRepeat {index number} ** is specified for the id attribute value of ʻinput`

<h:form id="formId">
  <ui:repeat var="item" varStatus="stat" value="#{idBean.array}">
    <input tyep="text" id="inOfRepeat#{stat.index}" value="h:Inside the form tag ui:If you use the repeat tag, the id attribute value will not be the specified value" />
  </ui:repeat>
</h:form>

The id attribute value of ʻinputis ** inOfRepeat {index number} **. Since it is out of the JSF world, the id attribute value of theh: form tag does not affect even if there is no prepareId = "false" `.

output

<form id="formId" name="formId" method="post" action="/tryJsf/base.jsf" enctype="application/x-www-form-urlencoded">
  <input type="hidden" name="formId" value="formId">
  <input tyep="text" id="inOfRepeat0" value="h:Inside the form tag ui:If you use the repeat tag, the id attribute value will not be the specified value">
  <input tyep="text" id="inOfRepeat1" value="h:Inside the form tag ui:If you use the repeat tag, the id attribute value will not be the specified value">
  <input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-3641841499499477715:2017944983286472561" autocomplete="off">
</form>

Solution 2: Stop the ui: repeat tag and use the c: forEach tag

Note: It's a shame if you don't write the id attribute value so that it is unique. Since the JSTL Core tag (c :) is a tag inherited from JSP, is it not JSF-like?

If you specify ** formId ** for the id attribute value of the h: form tag and ** inOfRepeat {index number} ** for the id attribute value of h: inputText

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
  xmlns:h="http://xmlns.jcp.org/jsf/html"
  xmlns:f="http://xmlns.jcp.org/jsf/core"
  xmlns:c="http://java.sun.com/jsp/jstl/core"> <!--<<<Postscript-->
<h:form id="formId">
  <c:forEach var="item" varStatus="stat" items="#{idBean.array}">
   <h:inputText id="inOfRepeat#{stat.index}" value="h:Inside the form tag ui:If you use the repeat tag, the id attribute value will not be the specified value"/>
  </c:forEach>
</h:form>

The id attribute value of ʻinput` is ** formId: inOfRepeat {index number} **.

output

<form id="formId" name="formId" method="post" action="/tryJsf/base.jsf" enctype="application/x-www-form-urlencoded">
  <input type="hidden" name="formId" value="formId">
  <input id="formId:inOfRepeat0" type="text" name="formId:inOfRepeat0" value="h:Inside the form tag ui:If you use the repeat tag, the id attribute value will not be the specified value">
  <input id="formId:inOfRepeat1" type="text" name="formId:inOfRepeat1" value="h:Inside the form tag ui:If you use the repeat tag, the id attribute value will not be the specified value">
  <input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="7276136016284590450:-4018393601695065919" autocomplete="off">
</form>

If you do not want to attach the id attribute value of the h: form tag, specifyprepareId = "false".

<h:form id="formId" prependId="false">
...Same as before...

output

<form id="formId" name="formId" method="post" action="/tryJsf/base.jsf" enctype="application/x-www-form-urlencoded">
  <input type="hidden" name="formId" value="formId">
  <input id="inOfRepeat0" type="text" name="inOfRepeat0" value="h:Inside the form tag ui:If you use the repeat tag, the id attribute value will not be the specified value">
  <input id="inOfRepeat1" type="text" name="inOfRepeat1" value="h:Inside the form tag ui:If you use the repeat tag, the id attribute value will not be the specified value">
  <input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-4294574413761401134:-7748270303136609237" autocomplete="off">
</form>