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

时间:2014-07-23 13:51:35

标签: javascript ajax jsf-2.2

有一种简单的方法可以在调用<f:ajax listener>之前和之后调用JavaScript操作,例如我想在之前调用window.alert("pre") ,在支持bean {{1}中调用 window.alert("post")之后调用onChange }:

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

1 个答案:

答案 0 :(得分:14)

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

另见: