Question

我试图根据验证决定实现组件的选择（和聚焦）。

例如：

登录表单（2个输入：用户名，密码; 1个提交按钮）
如果username上的验证失败，<h:inputText id="name">将会重点关注
如果password上的验证失败，<h:inputSecret id="password">将会重点关注
页面不会刷新，提交是 ajax 按钮

我尝试过的事情：

没有 ajax调用（ 正常工作 - componentId在验证过程中的bean中设置，并且已选中/专注每页刷新/提交后）：

$(document).ready(function() {
  document.getElementById('form:#{bean.componentId}').focus();
  document.getElementById('form:#{bean.componentId}').select();
});
...
<h:commandButton id="save" action="#{bean.save}" type="submit"/>

与 ajax调用：

function myFunc(data) {
  if (data.status == "success") {
    var element = document.getElementById('form:#{bean.componentId}');
    element.focus();
    element.select();
}}
...
<h:commandButton id="save" action="#{bean.save}" type="submit">
  <f:ajax execute="@form" render="@form" onevent="myFunc"/>
</h:commandButton>

这种方式也有效，问题是，componentId仍然是相同的（在bean创建过程中是一种形式的）。

与此主题相关的先前问题：

如何使用ajax提交按钮并选择/聚焦到具有验证错误的字段???

Answer 1

非ajax提交基本上重新呈现整个页面，包括脚本。 ajax提交只重新呈现页面的一部分，在您的特定情况下，只有表单本身（由<f:ajax render>属性控制）。这些脚本显然没有放在表单中，因此它们保留了“旧”值（你知道，EL #{}在webserver中运行而不在webbrowser中运行，所以目前webbrowser检索HTML / JS代码，EL已经运行了很长时间，当你调用JS代码时它不会被重新执行。）

你需要将脚本块与那些EL表达式放在同一个表单中，这样它也会在ajax submit上更新。

Ajax submit - 选择并关注具有验证错误的字段

1 个答案: