Как делать обновления на стороне клиента в JSF 2.0

Question

Я бы хотел сделать обновления компонентов на стороне клиента.Пример: отключить кнопку при установке флажка:

<h:selectBooleanCheckbox value="true" onchange="button.disabled=true" />
<h:commandButton id="button" value="Save" />

Выше не работает.Есть ли способ сделать это декларативно в JSF?

Answer 1

Не работает, потому что идентификатор компонента JSF не обязательно совпадает с сгенерированным идентификатором HTML.JSF составляет идентификатор элемента HTML и имя элемента формы на основе идентификаторов всех UINamingContainer компонентов в дереве - если они есть.UIForm компонент является одним из них.Щелкните правой кнопкой мыши страницу в веб-браузере и выберите Просмотр источника .Смотрите и учитесь.

Существует два способа решения этой проблемы:

1. Установить prependId атрибут <h:form> в false.

   <h:form prependId="false">
       <h:selectBooleanCheckbox value="true" onclick="button.disabled=true" />
       <h:commandButton id="button" value="Save" />
   </h:form>
   

   Обратите внимание, что вместо этого я бы предпочел использовать onclick="button.disabled=!checked".onchange срабатывает только тогда, когда элемент ввода теряет фокус, и это не интуитивно понятно в случае флажков и радиокнопок.Кроме того, вы хотели бы включить его, когда флажок будет установлен снова, верно?

2. Дайте <h:form> фиксированный идентификатор, чтобы вы знали, как генерируется имя элемента формывыглядит так:

   <h:form id="form">
       <h:selectBooleanCheckbox value="true" onclick="form['form:button'].disabled=true" />
       <h:commandButton id="button" value="Save" />
   </h:form>
   

   Обозначение в скобках является обязательным, поскольку : является недопустимым символом идентификатора и просто onclick="form:button.disabled=true" не будет работать.Также здесь я бы предпочел использовать onclick="form['form:button'].disabled=!checked вместо

Та же проблема относится и к document.getElementById().Так что простая замена button на document.getElementById('button') сама по себе не решит проблему.

Answer 2

просто используйте JavaScript

document.getElementById("buttonId").disabled="true";  

Проверьте это