11

I need to render h:inputText as following html output :

  <input id="yourName" type="text" name="name" />
  <input id="email" type="text" name="email" />

But h:inputText renders the name attribute same as client id of the component. I want to specify the name attribute myself, instead of putting client id in that, so that the input field can show meaningful autocomplete suggestions from previously submitted values for same field type on other sites. For e.g. when I use name="email" with input field for email, user is shown suggestions of emails ids he submitted previously on other websites.

Rajat Gupta
  • 25,853
  • 63
  • 179
  • 294
  • http://stackoverflow.com/questions/6859520/adding-custom-attribute-html5-support-to-jsf-2-0-uiinput-component – Daniel Apr 09 '13 at 06:48

2 Answers2

17

You can't achieve it using <h:inputText>. Its name is autogenerated by JSF based on the client ID (which is in turn based on component ID and all of its naming container parents).

You've basically 2 options to achieve the concrete functional requirement anyway:

  1. If there are no other naming container parents, instruct the parent form to not prepend its ID:

    <h:form prependId="false">

    This will however cause <f:ajax> to fail.

  2. Use plain HTML elements instead of JSF components:

    <input name="name" value="#{bean.name}" />
<input name="email" value="#{bean.email}" />

    You only have to collect them yourself via @ManagedProperty on a request scoped bean:

    @ManagedProperty("#{param.name}")
private String name;

@ManagedProperty("#{param.email}")
private String email;

    And you'll miss JSF builtin validation/conversion facility and ajax magic.

There's however a completely different alternative: use HTML5 <input type="email">. This way the browser will autosuggest all previously entered emails on inputs of the very same type. This is not natively supported by <h:inputText>. You can however use a custom render kit to get it to work, as answered in Adding custom attribute (HTML5) support to Primefaces (3.4):

<h:inputText type="email" ... />

Update as of JSF 2.2 you can finally easily declare passthrough attributes without needing a custom render kit.

<... xmlns:a="http://xmlns.jcp.org/jsf/passthrough">
...
<h:inputText a:type="email" ... />
Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • @BalusC why adding `prependId="false"` will cause `` to fail? – Tarik Feb 17 '15 at 17:54
  • 3
    @Tarik: It can't find components to execute. Just never use `prependId="false"`. They should never have added it in JSF 1.2. – BalusC Feb 17 '15 at 17:56
-1

You are able to do what you want without specifying the name attribute. The id attribute is enough. Try the following as per an example:

< h:inputText id="email" ... />

...
$("#email input").click(function (event) {
...
}

instead of

$("#email input[name='email']").click(function (event)

Hope this is what you are looking for :)

iBug
  • 35,554
  • 7
  • 89
  • 134
Henz
  • 7
  • 2
  • 1
    This is **not** going to work without any other attributes set in the page and those attributes should **not be used**. See point 1 in the accepted answer. The person who upvoted this should also read the accepted answer... – Kukeltje Jan 05 '18 at 10:23
  • Maybe I didn't catch it at the beginning (thought it was a js call). But if I do now he can use a properties file in order to call those with the following syntax: value="#{prefix.properties}" – Henz Jan 10 '18 at 00:09