Как обращаться к элементам JSF через JavaScript в Facelets

Оффтоп javascript
1

Проблема с доступом к элементам JSF из JavaScript

Пытаюсь работать с JSF и Facelets, но столкнулся с проблемой. Мне нужно через JavaScript изменять скрытые поля ввода на странице. Конкретно хочу при загрузке страницы записать в скрытое поле информацию о глубине цвета браузера пользователя.

Мой код сейчас выглядит так:

<body onload="detectScreenInfo(document.getElementById(?????);">  

<h:form>
  <h:inputHidden value="#{userSession.screenDepth}" id="screenInfo" />
</h:form>

Проблема в том, что JSF при обработке страницы меняет идентификаторы элементов. Как правильно получить доступ к этим элементам из JavaScript кода? Какой способ лучше всего использовать для такой задачи?

Буду благодарен за любые советы и примеры решения.

2

А что если просто через атрибут name обращаться? Я обычно ставлю name на элемент и потом использую document.getElementsByName(‘screenInfo’)[0]. Работает стабильно и не зависит от того как JSF переименовывает id. Или еще вариант - через классы CSS обращаться, добавляешь styleClass и ищешь по класу.

3

JSF действительно генерирует свои id, но есть несколько простых способов получить доступ к элементам. Один из них - использовать document.getElementById('#{component.clientId}') в твоем xhtml. В твоем случае это будет выглядеть так: onload="detectScreenInfo(document.getElementById('#{screenInfo.clientId}'))". Также, можно добавить prependId="false" к форме, чтобы сохранить исходный id, или использовать jQuery селектор $('[id$=screenInfo]'), который находит элемент, чье id заканчивается на screenInfo.