2008-10-23 3 views
2

Je voudrais utiliser JavaScript pour manipuler des champs de saisie cachés dans une page JSF/Facelets. Lorsque la page se charge, j'ai besoin de définir un champ caché à la profondeur de couleur du client.Utilisation de JavaScript avec JSF et Facelets

De mon Facelet:

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

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

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

Répondre

4

Vous devez définir l'ID du formulaire pour que vous sachiez de quoi il s'agit. Ensuite, vous serez en mesure de construire l'ID de l'é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 d'identification de la forme, vous pouvez le trouver à l'exécution, comme suit:

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

est-il pas peut-être plus dynamique ici? –

0

Voir la source html générée et regarder ce que le JSF nommé attribut id de l'étiquette.

Vous verrez bientôt comment la convention de nommage fonctionne. Il est généralement comme NOMFORMAT: FIELDNAME

+0

C'est un peu dangereux car l'ID généré peut changer de manière inattendue. Par exemple, cela va changer si un élément JSF est ajouté avant l'élément de formulaire. – sblundy

+0

C'est pourquoi la meilleure pratique consiste à toujours nommer vos composants. Dans ce cas, il a id = "colorDepth". Le formulaire doit également avoir un nom d'ensemble. Cela ne changera que s'il le change. Ou ajoute un nouveau formulaire avant ce formulaire. Tels sont les pièges du développement des visages. – branchgabriel

+0

[J'ai répondu à cette question ici] (http://stackoverflow.com/questions/6045307/how-can-i-know-the-id-of-a-jsf-component-so-i-can-use -in-javascript) – ftravers

0

Définition d'une findElement fonction à l'échelle mondiale et l'utiliser 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'));"> 
+0

[J'ai répondu à cette question ici] (http://stackoverflow.com/questions/6045307/how-can-i-know-the-id-of-a-jsf-component-so- i-can-use-in-javascript) – ftravers

Questions connexes