Search code examples
javascriptjsffacelets

Using JavaScript with JSF and Facelets

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?

Solution

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