Использование JavaScript с JSF и Facelets

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

  •  04-07-2019
  •  | 
  •  

Вопрос

Я хотел бы использовать JavaScript для управления скрытыми полями ввода на странице JSF / Facelets. Когда страница загружается, мне нужно установить скрытое поле для глубины цвета клиента.

Из моего Facelet: 

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

<h:form>
  <h:inputHidden value="#{login.colorDepth}" id="colorDepth" />
</h:form>

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

Это было полезно?

Решение

Вы хотите установить идентификатор формы, чтобы вы знали, что это такое. Тогда вы сможете создать фактический идентификатор элемента. 

<body onload="setColorDepth(document.getElementById('myForm:colorDepth');">

<h:form id="myForm">
  <h:inputHidden value="#{login.colorDepth}" id="colorDepth" />
</h:form>

Если вы не хотите устанавливать поле идентификатора формы, вы можете найти его во время выполнения, например: 

<body onload="setColorDepth(document.getElementById(document.forms[0].id + ':colorDepth');">

Другие советы

Просмотрите созданный источник html и посмотрите, как jsf назвал атрибут id тега.

Скоро вы увидите, как работает соглашение об именах. Обычно это как FORMNAME: FIELDNAME

Вы можете использовать clientId элемента управления, возвращенный UIComponent.getClientId (FacesContext) . См. здесь для примера. код.

Определите функцию findElement глобально и используйте ее везде 

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'));">
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top