Utilizzo di JavaScript con JSF e facelets
-
04-07-2019 - |
Domanda
Vorrei usare JavaScript per manipolare campi di input nascosti in una pagina JSF / Facelets. Quando la pagina viene caricata, devo impostare un campo nascosto sulla profondità del colore del client.
Dal mio facelet:
<body onload="setColorDepth(document.getElementById(?????);">
<h:form>
<h:inputHidden value="#{login.colorDepth}" id="colorDepth" />
</h:form>
Quando JSF elabora la pagina, sta ovviamente cambiando gli ID degli elementi. Qual è il modo migliore per fare riferimento a questi elementi dal mio codice JavaScript?
Soluzione
Ti consigliamo di impostare l'ID del modulo in modo da sapere di cosa si tratta. Quindi sarai in grado di costruire l'ID elemento effettivo.
<body onload="setColorDepth(document.getElementById('myForm:colorDepth');">
<h:form id="myForm">
<h:inputHidden value="#{login.colorDepth}" id="colorDepth" />
</h:form>
Se non si desidera impostare il campo ID del modulo, è possibile trovarlo in fase di esecuzione, in questo modo:
<body onload="setColorDepth(document.getElementById(document.forms[0].id + ':colorDepth');">
Altri suggerimenti
Visualizza l'origine html generata e osserva come jsf ha chiamato l'attributo id del tag.
Presto vedrai come funziona la convenzione di denominazione. Di solito è come FORMNAME: FIELDNAME
Puoi usare clientId del controllo come restituito da UIComponent.getClientId (FacesContext) . Vedi qui per un esempio codice.
Definisci una funzione findElement a livello globale e usala ovunque
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'));">