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

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>称为AFTER onclick,因此在选择组件后渲染表单,并清除焦点.

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

更新:(我试过例子)

• 添加onevent="myFunc();"到f:ajax=>会导致刷新页面
• 添加onevent="myFunc()"到f:ajax=>相同的行为onclick属性
• 接下来f:ajax是oneventattr.=>仍然一样

update2(它应该如何工作):

• 提交按钮是ajax调用
• 表格根据需要进行清洁
• 适当的领域是集中的(取决于一些用户选择的因素)

Answer 1

该onevent处理器将实际上被调用三次,它应指向一个函数名,而不是函数本身.在发送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" />