Comment accéder aux ID de composants JSF en JavaScript ?

Connaître l'identifiant d'un composant JSF pour une utilisation en Javascript

En Javascript, la fonction getElementById peut être exploitée pour accéder à un composant. Cependant, étant donné que JSF génère dynamiquement des ID de composant, l'obtention de l'ID du composant est cruciale. Cet article explore les moyens de récupérer l'ID du composant à utiliser en Javascript.

Considérez le scénario suivant dans lequel nous souhaitons accéder au composant inputText via le code Javascript :

<h:inputText>

function myFunc() {
  // Get the inputText component's contents
  alert("Your email address is: " + document.getElementById("emailAddress").value);
}

Utilisation d'un document .getElementById avec l'élément HTML DOM généré

L'élément HTML DOM généré a une structure qui diffère de l'ID que vous préciser dans JSF. L’inspection du code généré révélera l’ID attribué. Par exemple, le inputText dans l'exemple ci-dessus aurait pu être rendu comme :

<input type="text">

où "j_id0:emailAddress" représente l'ID réel dans le DOM HTML généré par JSF. Par conséquent, pour référencer avec précision le composant en Javascript, utilisez l'ID généré au lieu de l'ID spécifié.

Définition d'un ID fixe pour les NamingContainers JSF

Vous pouvez également attribuer un ID fixe à JSF NamingContainer composants, tels que les formulaires, pour empêcher JSF de générer automatiquement des identifiants. Par exemple :

<h:form>

Avec cette configuration, l'ID du formulaire sera fixé comme "formId" et l'ID inputText sera "formId:emailAddress", que vous pouvez désormais utiliser directement en Javascript.

Utiliser #{Component.clientId} avec Binding

Une technique plus avancée consiste à utiliser le #{component.clientId} expression avec une liaison de composant. Par exemple :

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

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

Mise à jour :

Utilisation directe de #{component.clientId}

L'article de blog mentionné dans le Le problème est directement lié aux références #{component}, qui font référence au composant actuel où l'expression EL est évaluée. Pour obtenir l'ID du composant, utilisez la syntaxe suivante :

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

Passer l'élément HTML DOM en tant que "this" Référence

Une autre approche consiste à transmettre l'élément HTML DOM généré en tant que "this" référence à une fonction, vous permettant d'accéder directement aux propriétés du composant au sein de la fonction.

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

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

Utilisation de jQuery et Délégation d'événements

jQuery offre une option encore plus avancée en utilisant la délégation d'événements et une classe de style pour abstraire les composants.

<h:inputText styleClass="someMarkerClass" />

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!