Получение JSF-определенного компонента с Javascript

Question

Я создаю интерфейс с использованием JSF, и мне бы хотелось, чтобы значение одного текстового поля предоставляло значение по умолчанию для секунды, если второе еще не установлено. Решающий код будет выглядеть примерно так:

<h:outputScript>
function suggestValue2() {
    var value2 = document.getElementById('value2').value;
    if (value2 == "") {
        document.getElementById('value2').value = document.getElementById('value1').value;
    }
}
</h:outputScript>

<h:inputText
    id="value1"
    onblur="suggestValue2();" />

<h:inputText
    id="value2" />

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

---

Изменить: я должен отметить, что это будет появляться внутри составного компонента, который может появиться несколько раз на одной странице. JSF, динамически устанавливающий фактический идентификатор, представляет желаемое поведение.

Answer 1

Привязать компонент к представлению,

<h:inputText binding="#{input1}" ... />

так что вы можете просто напечатать его идентификатор клиента в другом месте в представлении UIComponent#getClientId(),

<h:outputScript>
    var input1 = document.getElementById('#{input1.clientId}');
    // ...
</h:outputScript>

---

Как вы упомянули, что вы находитесь внутри составного компонента, может быть полезно знать, что собственный идентификатор клиента составного компонента уже доступен через #{cc.clientId}, Таким образом, более рекомендуемая альтернатива будет:

<cc:implementation>
    <h:outputScript>
        var input1 = document.getElementById('#{cc.clientId}:input1');
        // ...
    </h:outputScript>
    ...
    <h:inputText id="input1" ... />
    ...
</cc:implementation>

Смотрите также:

• Интеграция JavaScript в составной компонент JSF - чистый путь

Answer 2

Jsf использует концепцию "именования контейнеров", которая говорит, что идентификатор не обязательно должен быть уникальным в предоставленном контейнере. При условии, что у контейнера есть Id. Поэтому, если вы не передаете Id для контейнера, jsf добавляет непредсказуемые значения перед элементом. С идентификатором контейнера он становится containerid: элементы id. И это может быть надежно использовано в JavaScript