Using JavaScript with JSF and Facelets

StackOverflow https://stackoverflow.com/questions/231377

  •  04-07-2019
  •  | 
  •  

Question

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?

Was it helpful?

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

OTHER TIPS

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'));">
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top