在ajax调用< f:ajax>之后处理onclick函数. [英] 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>

此解决方案有效，但问题是<f:ajax>被称为AFTER 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?

更新 :(例如，我尝试过)

update: (I've tried for example)

• 将onevent="myFunc();"添加到f:ajax =>导致页面刷新
• 将onevent="myFunc()"添加到f:ajax =>与onclick属性相同的行为
• 下一个f:ajax和onevent 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调用< f:ajax>之后处理onclick函数.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！