Ajax调用后处理onclick函数

小编典典

Ajax调用后处理onclick函数

ajax

提交表单（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
根据需要清洁表格
重点关注适当的领域（取决于某些用户选择的因素）

阅读 380

2020-07-26

共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" />

2020-07-26