Comment puis-je connaître l'id d'un composant JSF donc je peux l'utiliser en Javascript

Vous avez besoin d'utiliser exactement le code JSF a attribué dans le code HTML généré en sortie. Cliquez avec le bouton droit de la page dans votre navigateur et choisissez l'Affichage de la Source. C'est exactement le code HTML JS qui voit (vous savez, le JS s'exécute dans le navigateur web et intercepte sur DOM HTML arbre).

Donné un

<h:form>
    <h:inputText id="emailAddresses" ... />

Ça va ressembler à quelque chose comme ceci:

<form id="j_id0">
    <input type="text" id="j_id0:emailAddress" ... />

Où j_id0 est l'IDENTIFIANT généré de l'HTML généré <form> élément.

Vous préférez donner à tous les JSF NamingContainer composants fixe id de sorte que JSF ne pas générer automatiquement entre eux. Le <h:form> est l'un d'entre eux.

<h:form id="formId">
    <h:inputText id="emailAddresses" value="#{emailAddresses.emailAddressesStr}"/>

De cette façon, le formulaire ne sera pas obtenir un ID généré automatiquement comme j_id0 et le champ de saisie sera fixe ID de formId:emailAddress. Vous pouvez ensuite vous suffit de référence en tant que tel en JS.

var input = document.getElementById('formId:emailAddress');

Partir de ce point, vous pouvez continuer à utiliser du code JS comme d'habitude. E. g. l'obtention de la valeur via input.value.

Voir aussi:

• Comment sélectionner des composants JSF à l'aide de jQuery?

---

Mise à jour que par votre mise à jour: vous avez mal compris l'article du blog. Le spécial #{component} de référence se réfère à la actuel composant où l'expression EL est évalué et cela ne fonctionne qu'à l'intérieur de tous les attributs du composant lui-même. Tout ce que vous voulez peut également être réalisé comme suit:

var input = document.getElementById('#{emailAddress.clientId}');

(notez le binding à la vue, vous devriez absolument pas lier à un haricot)

<h:inputText binding="#{emailAddress}" />

mais c'est laid. Mieux utiliser l'approche suivante dans laquelle vous passez le code HTML généré élément du DOM en JavaScript this référence à la fonction

<h:inputText onclick="show(this)" />

avec

function show(input) {
    alert(input.value);
}

Si vous utilisez jQuery, vous pouvez même aller plus loin en faisant abstraction de leur utilisation d'un style de classe en tant que marqueur de l'interface

<h:inputText styleClass="someMarkerClass" />

avec

$(document).on("click", ".someMarkerClass", function() {
    var $input = $(this);
    alert($input.val());
});

Id est généré de façon dynamique, de sorte que vous devrait définir des noms pour tous les éléments parents pour éviter j_id123-comme id.

Notez que si vous utilisez jQuery pour sélectionner l'élément que vous devez utiliser une double barre oblique avant du côlon:

    jQuery("my-form-id\\:my-text-input-block\\:my-input-id")

au lieu de:

    jQuery("my-form-id:my-text-input-block:my-input-id")

En cas de Richfaces vous pouvez utiliser l'expression el sur jsf page:

    #{rich:element('native-jsf-input-id')} 

pour sélectionner l'élément javascript, par exemple:

    #{rich:element('native-jsf-input-id')}.value = "Enter something here";

Je sais que ce n'est pas le JSF mais si vous voulez éviter l'ID de la douleur, vous pouvez définir une spéciale de classe CSS pour le sélecteur. Juste assurez-vous d'utiliser un bon nom de sorte que lorsque quelqu'un lit le nom de la classe, il est clair qu'il a été utilisé à cette fin.

<h:inputText id="emailAddresses" class="emailAddressesForSelector"...

Dans votre JavaScript:

jQuery('.emailAddressesForSelector');

Bien sûr, vous auriez encore à gérer manuellement le nom de la classe unique.
Je pense que c'est récurrent, tant que vous n'utilisez pas cette dans de composants réutilisables. Dans ce cas, vous pouvez générer les noms de classe à l'aide d'une convention.