Using JavaScript with JSF and Facelets

javascript jsf facelets

18,418

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');">

18,418

Author by

Eric Noob

Updated on June 04, 2022

Comments

Eric Noob almost 2 years
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?
jbwharris over 15 years

This is a bit dangerous as the generated ID may change unexpectedly. For example, it'll change if a JSF element is added before the form element.
Eric Noob over 15 years

is it not possibly to be more dynamic here?
branchgabriel over 15 years

This is why the best practice is to always name your components. In this case he has id="colorDepth". The form should also have a set name as well. It will only change if he changes it. Or adds a new form before this form. Such are the pitfalls of faces development.
ftravers almost 13 years

I've answered this question here