Utilisation de JavaScript avec JSF et Facelets

StackOverflow https://stackoverflow.com/questions/231377

  •  04-07-2019
  •  | 
  •  

Question

J'aimerais utiliser JavaScript pour manipuler des champs de saisie masqués dans une page JSF / Facelets. Lorsque la page est chargée, je dois définir un champ masqué sur le nombre de couleurs du client.

De mon visage: 

<body onload="setColorDepth(document.getElementById(?????);">

<h:form>
  <h:inputHidden value="#{login.colorDepth}" id="colorDepth" />
</h:form>

Lorsque JSF traite la page, il modifie bien sûr les identifiants des éléments. Quelle est la meilleure façon de référencer ces éléments à partir de mon code JavaScript?

Était-ce utile?

La solution

Vous souhaitez définir l'ID du formulaire pour savoir de quoi il s'agit. Ensuite, vous pourrez construire l'identifiant d'élément réel. 

<body onload="setColorDepth(document.getElementById('myForm:colorDepth');">

<h:form id="myForm">
  <h:inputHidden value="#{login.colorDepth}" id="colorDepth" />
</h:form>

Si vous ne souhaitez pas définir le champ ID du formulaire, vous pouvez le trouver au moment de l'exécution, comme suit: 

<body onload="setColorDepth(document.getElementById(document.forms[0].id + ':colorDepth');">

Autres conseils

Voir la source HTML générée et voir comment le jsf a nommé l'attribut id de la balise.

Vous verrez bientôt comment fonctionne la convention de dénomination. C'est généralement comme FORMNAME: FIELDNAME

Vous pouvez utiliser clientId du contrôle, tel qu'il est renvoyé par UIComponent.getClientId (FacesContext) . Voir ici pour un exemple. code.

Définissez une fonction findElement globalement et utilisez-la partout 

function findElement(elementId) {
        if(document.getElementById(elementId)) return elementId;
        for(var  i = 0; i < document.forms.length; i++) {
            if(document.getElementById(document.forms[i].id + ':' + elementId)) {
                return document.forms[i].id + ':' + elementId;
            }
        }
        return null;
    }


    <body onload="setColorDepth(findElement('colorDepth'));">
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top