ajax 调用后处理 onclick 函数 <f:ajax>

Question

我正在尝试在提交表单（ajax 调用）后选择并关注所选组件 ID。

<script>
var myFunc = function() {
  document.getElementById('form:#{bean.componentId}').focus();
  document.getElementById('form:#{bean.componentId}').select();
};

$(document).ready(function() {
  myFunc();
});
</script>

<h:form id="form">
  <h:commandButton action="#{bean.save}" onclick="return myFunc();" ...>
    <f:ajax execute="@form" render="@form"/>
  </h:commandButton>
  ...
</h:form>

此解决方案有效，但问题是 <f:ajax> 在 onclick 之后被调用，因此在选择组件后呈现表单，并清除焦点。

如何在表单呈现后调用我的函数？

更新：（例如我试过）

• 将onevent="myFunc();" 添加到f:ajax => 导致页面刷新
• 将onevent="myFunc()" 添加到f:ajax => 与onclick 属性相同的行为
• 下一个f:ajax 和onevent attr。 => 还是一样

update2（应该如何工作）：

• 提交按钮是ajax调用
• 根据需要清理表单
• 关注适当的字段（取决于某些用户选择的因素）

Answer 1

onevent 处理程序实际上会被调用 3 次，它应该指向一个函数名，而不是函数本身。一次是在发送ajax 请求之前，一次是在ajax 响应到达之后，一次是在成功更新HTML DOM 时。您应该为此检查给定数据参数的status 属性。

function listener(data) {
    var status = data.status; // Can be "begin", "complete" or "success".

    switch (status) {
        case "begin": // Before the ajax request is sent.
            // ...
            break;

        case "complete": // After the ajax response is arrived.
            // ...
            break;

        case "success": // After update of HTML DOM based on ajax response..
            // ...
            break;
    }
}

在您的特定情况下，您只需添加检查状态是否为success。

function myFunc(data) {
    if (data.status == "success") {
        var element = document.getElementById('form:#{bean.componentId}');
        element.focus();
        element.select();
    }
}

你需要通过它的名字来引用这个函数：

<f:ajax ... onevent="myFunc" />