web-dev-qa-db-ja.com

f：ajaxリスナーが呼び出される前後にJavaScriptを実行する

_<f:ajax listener>_の呼び出しの前後にJavaScriptアクションを呼び出す簡単な方法があります。 window.alert("pre")beforeを呼び出し、window.alert("post")afteronChangeをバッキング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_のみが呼び出されます。

javascriptajaxjsf-2.2
12
Karl Richter

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

参照：

14
BalusC