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

Process onclick function after ajax call <f:ajax>

提问by gaffcz

I'm trying to select and focus to choosed component ID after submit a form (ajax call).

我试图在提交表单（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>

This solution is working, but problem is, that <f:ajax>is called AFTER onclick, so the the form is rendered after component selection, and focus is cleared.

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

How can I call my function AFTER the form is rendered?

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

update:(I've tried for example)

更新：（例如我试过）

• add onevent="myFunc();"to f:ajax=> leads to refreshing page
• add onevent="myFunc()"to f:ajax=> same behaviour as onclickattribute
• next f:ajaxwith oneventattr. => still the same

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

update2(how it should works):

update2（它应该如何工作）：

• submit button is ajax called
• form is cleaned as needed
• appropriate field is focused (depended on some user choosed factors)

• 提交按钮被称为ajax
• 根据需要清理表格
• 适当的领域是重点（取决于一些用户选择的因素）

回答by BalusC

The oneventhandler will actually be invoked three times and it should point to a function name, not the function itself. One time before the ajax request is been sent, one time after the ajax response is been arrived and one time when the HTML DOM is successfully updated. You should be checking the statusproperty of the given data argument for that.

该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;
    }
}

In your particular case, you thus just need to add a check if the status is success.

在您的特定情况下，您只需要检查状态是否为success.

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

And you need to reference the function by its name:

并且您需要通过其名称引用该函数：

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