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

problème: parfois, vous voudrez accéder à un composant à partir de javascript avec getElementById , mais les id sont générés dynamiquement dans JSF, donc vous besoin d'une méthode pour obtenir un objet id. Je répondrai plus bas sur la façon dont vous pouvez faire cela.

Question Originale: Je veux utiliser un code comme ci-dessous. Comment puis-je référencer le composant inputText JSF dans Mon Javascript? 

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <head>
       <title>Input Name Page</title>
        <script type="javascript" >
          function myFunc() {
            // how can I get the contents of the inputText component below          
            alert("Your email address is: " + document.getElementById("emailAddress").value);
          }
       </script>
    </head>
    <h:body>
        <f:view>
            <h:form>
                Please enter your email address:<br/>
                <h:inputText id="emailAddresses" value="#{emailAddresses.emailAddressesStr}"/>
                <h:commandButton onclick="myFunc()" action="results" value="Next"/>
            </h:form>
        </f:view>
    </h:body>
</html>

mise à jour : ce post identificateurs de Client dans JSF2.0 discute en utilisant une technique comme: 

<script type="javascript" >
  function myFunc() {
    alert("Your email address is: " + document.getElementById("#{myInptTxtId.clientId}").value);
  }
</script>

<h:inputText id="myInptTxtId" value="backingBean.emailAddress"/>
<h:commandButton onclick="myFunc()" action="results" value="Next"/>

suggérant que l'attribut id sur le composant inputText crée un objet auquel on peut accéder avec EL en utilisant #{myInptTxtId} , dans l'exemple ci-dessus. L'article poursuit en disant que JSF 2.0 ajoute la méthode du zéro-argument getClientId() à la méthode UIComponent classe. En permettant ainsi la construction #{myInptTxtId.clientId} suggéré ci-dessus pour obtenir l'id généré réel du composant.

bien que dans mes tests cela ne fonctionne pas. D'autres personnes peuvent confirmer ou de nier. Les réponses suggérées ci-dessous présentent un inconvénient: pas la technique. Il serait donc bon de savoir si la technique ci-dessus en fait, il fonctionne.

37
demandé sur ftravers 2011-05-18 17:16:16

5 réponses

vous devez utiliser exactement L'ID comme JSF a assigné dans la sortie HTML générée. Cliquez sur la page de votre navigateur Web et choisissez View Source . C'est exactement le code HTML que JS voit (vous savez, JS court dans webbrowser et intercepte sur HTML DOM tree).

un 

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

ça ressemblera à quelque chose comme ça: 

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

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

vous préférez donner tous les JSF NamingContainer composants a fixes id pour que les JSF ne les autogénèrent pas. Le <h:form> en fait partie. 

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

de cette façon le formulaire n'obtiendra pas un ID autogénéré comme j_id0 et le champ d'entrée obtiendra un ID fixe de formId:emailAddress . Vous pouvez alors simplement le référencer comme tel dans JS. 

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

à partir de ce point, vous pouvez continuer à utiliser le code JS comme d'habitude. Par exemple: obtenir de la valeur via input.value .

voir aussi:

mise à jour selon votre mise à jour: vous avez mal compris l'article de blog. La référence spéciale #{component} fait référence au courant composant où L'expression EL est évaluée et cela ne fonctionne qu'à l'intérieur d'un des attributs du composant lui-même. Tout ce que vous voulez peut aussi ê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 DOM HTML généré élément 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 un peu plus loin en les abstrayant en utilisant une classe de style comme interface marqueur"" 

<h:inputText styleClass="someMarkerClass" />

avec 

$(document).on("click", ".someMarkerClass", function() {
    var $input = $(this);
    alert($input.val());
});
54
répondu BalusC 2017-05-23 12:02:08

Réponse: Donc, c'est la technique que je suis le plus heureux. Ne nécessite pas de faire trop beaucoup de choses bizarres pour comprendre l'id d'un composant. Rappelez-vous le point entier de ceci est donc vous pouvez connaître le id d'un composant de n'importe où sur votre page, pas juste du composant réel lui-même. C'est la clé. J'appuie sur un bouton, le lancement de la fonction javascript, et il devrait être en mesure d'accéder à autre composant, pas seulement celui qui l'a lancé.

cette solution ne nécessite pas de "clic droit" et voir ce qu'est l'id. Ce type de solution est fragile, car l'id est généré dynamiquement et si je change la page je vais devoir passer par ce non-sens à chaque fois.

  1. " liez le composant à une fève de soutien.

  2. référence de l'élément lié partout où vous voulez.

donc voici un exemple de la façon dont cela peut être fait.

suppositions: j'ai un *.page xhtml (pourrait être *.jsp) et j'ai défini une fève de soutien. Je suis également en utilisant JSF 2.0.

*.XHTML page 

<script>
  function myFunc() {
    var inputText = document.getElementById("#{backBean.emailAddyInputText.clientId}")                 
    alert("The email address is: " + inputText.value );
  }
</script>

<h:inputText binding="#{backBean.emailAddyInputText}"/>
<h:commandButton onclick="myFunc()" action="results" value="Next"/>

BackBean.java 

UIInput emailAddyInputText;

assurez-vous de créer votre getter/setter pour cette propriété.

7
répondu ftravers 2011-05-20 07:30:33

Id est généré dynamiquement, vous devez donc définir les noms de tous les éléments parent pour éviter les ids de type j_id123.

notez que si vous utilisez jQuery pour sélectionner l'élément-que vous devez utiliser Double barre oblique avant deux points: 

    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")

dans le cas de Richfaces, vous pouvez utiliser l'expression el sur la page jsf: 

    #{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";
4
répondu Ivan Bochko 2011-05-18 16:21:07

je sais que ce n'est pas la façon JSF mais si vous voulez éviter la douleur ID, vous pouvez définir une classe CSS spéciale 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 l'unicité du nom de classe. Je pense que c'est récurrent tant que vous n'utilisez pas cette composants réutilisables. Dans ce cas, vous pouvez générer les noms de classe en utilisant une convention.

1
répondu Christophe Roussy 2016-11-02 09:05:41

vous pouvez visualiser la source HTML lorsque celle-ci est générée et voir à quoi l'id est défini, de sorte que vous pouvez utiliser cela dans votre JavaScript. C'est dans un formulaire, il est probablement ajoutant l'id du formulaire.

0
répondu planetjones 2011-05-18 13:20:25