I would like to use JavaScript to manipulate hidden input fields in a JSF/Facelets page. When the page loads, I need to set a hidden field to the color depth of the client.
From my Facelet:
<body onload="setColorDepth(document.getElementById(?????);">
<h:form>
<h:inputHidden value="#{login.colorDepth}" id="colorDepth" />
</h:form>
When JSF processes the page, it is of course changing the IDs of the elements. What's the best way to reference these elements from my JavaScript code?
You'll want to set the ID of the form so you'll know what it is. Then you'll be able to construct the actual element ID.
<body onload="setColorDepth(document.getElementById('myForm:colorDepth');">
<h:form id="myForm">
<h:inputHidden value="#{login.colorDepth}" id="colorDepth" />
</h:form>
If you don't want to set the form's ID field, you could find it at runtime, like so:
<body onload="setColorDepth(document.getElementById(document.forms[0].id + ':colorDepth');">
View the generated html source and look at what the jsf named the id attribute of the tag.
You will soon see how the naming convention works. Its usually like FORMNAME:FIELDNAME
You can use the control's clientId as returned by UIComponent.getClientId(FacesContext). See here for sample code.
Define a function findElement globally and use it everywhere
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'));">