Usando JavaScript con JSF y Facelets
-
04-07-2019 - |
Pregunta
Me gustaría usar JavaScript para manipular campos de entrada ocultos en una página de JSF / Facelets. Cuando se carga la página, necesito establecer un campo oculto a la profundidad de color del cliente.
Desde mi Facelet:
<body onload="setColorDepth(document.getElementById(?????);">
<h:form>
<h:inputHidden value="#{login.colorDepth}" id="colorDepth" />
</h:form>
Cuando JSF procesa la página, por supuesto, está cambiando los ID de los elementos. ¿Cuál es la mejor manera de hacer referencia a estos elementos desde mi código JavaScript?
Solución
Deberá establecer la ID del formulario para saber de qué se trata. Entonces podrá construir la ID del elemento real.
<body onload="setColorDepth(document.getElementById('myForm:colorDepth');">
<h:form id="myForm">
<h:inputHidden value="#{login.colorDepth}" id="colorDepth" />
</h:form>
Si no desea establecer el campo de ID del formulario, puede encontrarlo en el tiempo de ejecución, así:
<body onload="setColorDepth(document.getElementById(document.forms[0].id + ':colorDepth');">
Otros consejos
Vea la fuente html generada y observe lo que jsf llamó el atributo id de la etiqueta.
Pronto verá cómo funciona la convención de nomenclatura. Suele ser FORMNAME: FIELDNAME
Puede usar el clientId del control tal como lo devuelve UIComponent.getClientId (FacesContext) . Consulte aquí para ver una muestra código.
Defina una función findElement globalmente y úsela en todas partes
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'));">