Proccess的onclick Ajax调用℃后功能; F：AJAX＆GT; [英] Proccess onclick function after ajax call <f:ajax>

问题描述

我想选择和重点选取组件ID后，提交表单（AJAX调用）。

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 id="btnSubmit" value="save" action="#{bean.save}" type="submit" 
                   onclick="return myFunc();">
    <f:ajax execute="@form" render="@form"/>
  </h:commandButton>
  ...

此解决方案的工作，但问题是，＆LT; F：AJAX＆GT; 叫后的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 属性
• 在接下来的 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 （它应该如何工作）：

update2 (how it should works):

• 提交按钮被称为AJAX
• 的形式被清洗的需要
• 在相应领域的重点是（依赖于某些用户选用的因素）

推荐答案

在的OnEvent 处理程序将实际被调用三次，它应该指向一个函数名，而不是函数本身。 Ajax请求之前有一次是被发送Ajax响应是被赶到后，一次，有一次在HTML DOM被成功更新。您应该检查状态对于给定的数据论证属性。

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

在特定的情况下，因此只需要添加一个检查，如果状态为成功。

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

这篇关于Proccess的onclick Ajax调用℃后功能; F：AJAX＆GT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！