在调用 f:ajax 侦听器之前和之后执行 JavaScript

Posted 2023-02-19

【中文标题】在调用 f:ajax 侦听器之前和之后执行 JavaScript

【英文标题】：Execute JavaScript before and after the f:ajax listener is invoked

【发布时间】：2014-09-14 17:55:16

【问题描述】：

在调用 <f:ajax listener> 之前和之后调用 javascript 操作有一个简单的方法，例如我想调用 window.alert("pre") before 和 window.alert("post") after onChange 在 backing bean ACtrl 中被调用：

<h:form>
    <h:inputText id="anId" value="#cityCtrl.dbHost">
        <f:ajax event="change" listener="#aCtrl.onChange" execute="@all"/>
    </h:inputText>
</h:form>

@ManagedBean
public class ACtrlimplements Serializable 
    public void onChange(AjaxBehaviorEvent event) 
        System.out.println("something changed");
    

添加多个 f:ajax 元素似乎不起作用（也许应该？！），例如在

<h:form>
    <h:inputText id="anId" value="#cityCtrl.dbHost">
        <f:ajax event="change" listener="#aCtrl.toggle" execute="@all"/>
        <f:ajax event="change" listener="#aCtrl.onChange" execute="@all"/>
        <f:ajax event="change" listener="#aCtrl.toggle" execute="@all"/>
    </h:inputText>
</h:form>

@ManagedBean
public class ACtrlimplements Serializable 
    public void onChange(AjaxBehaviorEvent event) 
        System.out.println("something changed");
    

    public void toggle(AjaxBehaviorEvent event) 
        System.out.println("blah");
    

只调用ACtrl.onChange。

【参考方案1】：

使用onevent 属性。它必须指向一个回调函数引用（所以不要包含括号！）：

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

其中实际的回调函数看起来像这样（JSF 将自己提供参数）：

function functionName(data) 
    var status = data.status; // Can be "begin", "complete" or "success".
    var source = data.source; // The parent html DOM element.

    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;
    

另见：

JSF 2.0 specification - 表 14.3 和 14.4 Is there a way to disable the command link until the ajax response is rendered How to do double-click prevention in JSF 2

【讨论】：

我自己怎么能不使用 onevent 的 javadoc（'将处理 UI 事件的 JavaScript 函数的名称。'）自己弄清楚... ;) 谢谢！