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?

Foi útil?

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'));">
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top