ajax调用后处理onclick函数<f:ajax> [英] Process onclick function after ajax call <f:ajax>

问题描述

在提交表单(ajax 调用)后，我尝试选择并关注所选的组件 ID.

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

<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>

这个解决方案是有效的，但问题是， 是在 onclick 之后调用的，所以表单在组件选择后呈现，并且焦点被清除.

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.

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

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

更新:(例如我已经尝试过)

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

• add onevent="myFunc();" to f:ajax => leads to refreshing page
• add onevent="myFunc()" to f:ajax => same behaviour as onclick attribute
• next f:ajax with onevent attr. => still the same

update2(它应该如何工作):

• 提交按钮被称为ajax
• 根据需要清理表单
• 关注适当的领域(取决于一些用户选择的因素)

推荐答案

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

The onevent handler 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 status property of the given data argument for that.

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.

In your particular case, you thus just need to add a check if the status is 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" />

这篇关于ajax调用后处理onclick函数<f:ajax>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！