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?

¿Fue útil?

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'));">
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top