Usando JavaScript com JSF e Facelets
-
04-07-2019 - |
Pergunta
Eu gostaria de usar o JavaScript para manipular campos de entrada ocultos em uma página JSF/Facelets. Quando a página carrega, preciso definir um campo oculto para a profundidade de cor do cliente.
Do meu Facelet:
<body onload="setColorDepth(document.getElementById(?????);">
<h:form>
<h:inputHidden value="#{login.colorDepth}" id="colorDepth" />
</h:form>
Quando o JSF processa a página, é claro que está alterando os IDs dos elementos. Qual é a melhor maneira de fazer referência a esses elementos do meu código JavaScript?
Solução
Você deseja definir o ID do formulário para saber o que é. Então você poderá construir o ID do elemento real.
<body onload="setColorDepth(document.getElementById('myForm:colorDepth');">
<h:form id="myForm">
<h:inputHidden value="#{login.colorDepth}" id="colorDepth" />
</h:form>
Se você não quiser definir o campo de identificação do formulário, poderá encontrá -lo em tempo de execução, como assim:
<body onload="setColorDepth(document.getElementById(document.forms[0].id + ':colorDepth');">
Outras dicas
Veja a fonte HTML gerada e veja o que o JSF nomeou o atributo ID da tag.
Em breve, você verá como funciona a convenção de nomenclatura. Geralmente é como formname: fieldname
Você pode usar o controle ID do Cliente conforme devolvido por Uicomponent.getClientId (facescontext). Ver aqui para código de amostra.
Defina uma função FindElement globalmente e use -a em todos os lugares
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'));">