如何在JSF 2.0中进行客户端更新

Question

我想做客户端组件更新。示例：单击复选框时禁用按钮：

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

以上不起作用。有没有办法在JSF中以声明方式执行此操作？

Answer 1

它不起作用，因为JSF组件ID不一定与生成的HTML ID相同。 JSF根据树中所有UINamingContainer组件的ID来组成HTML元素ID和表单元素名称-if any。 UIForm组件就是其中之一。在webbrowser中右键单击页面，然后选择查看源。看到并学习。

有两种方法可以解决这个问题：

1. 将prependId的{​​{1}}归属于<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"仅在输入元素失去焦点时触发，而在复选框和单选按钮时则不直观。此外，当您再次选中此复选框时，您想将其重新打开，对吗？

2. 为onchange提供一个固定ID，以便您了解生成的表单元素名称的外观：

   <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无法解决问题。

Answer 2

只需使用javascript

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

Check this