[Wicket] Ajax更新後にJavaScriptを実行する

Wicketを使ってAjax通信でページを更新したあと、任意のJavaScriptを実行したいシチュエーションって結構あります。
Wicketでは、Ajax更新後にJavaScriptを実行する方法がいくつかあるようです。
今回は役に立ちそうな3種類の方法についてまとめたいと思います。

ちなみにWicketのバージョンは1.5.2です。

1. AjaxRequestTargetにJavaScriptを追加する

 もっとも頻繁に使う方法です。
各コンポーネントのonEventやAjaxLinkのonClickなど、イベントハンドラが呼び出された時の引数にAjaxRequestTargetがあります。このAjaxRequestTargetのappendJavaScriptを呼び出すことによって、Ajax更新後に実行されるJavaScriptを記述することが出来ます。

AjaxLink<Void> link = new AjaxLink<Void>("link") {
    @Override
    public void onClick(AjaxRequestTarget target) {
        target.appendJavaScript("alert('update complete!');");
    }
};

 AjaxLinkを使用した例ですが、4行目のようにappendJavaScriptを使って実行したいJavaScriptを追加します。
上記の例では、ページ更新後にダイアログが表示されます。

2. getAjaxCallDecoratorをオーバーライドする

 ちょっと面倒な方法になりますが、上記の方法とは別に、匿名クラス(無名クラス)を使用して、getAjaxCallDecoratorをオーバーライドする方法があります。

new AjaxLink<Void>("link") {
    protected onClick(AjaxRequestTarget target) { }

    @Override
    protected IAjaxCallDecorator getAjaxCallDecorator() {
        return new AjaxCallDecorator() {
            @Override
            public CharSequence decorateScript(Component c, CharSequence script) {
                return super.decorateScript(c, "alert('update complete!'); " + script);
             }
        };
    }
}

 まず、AjaxLinkのgetAjaxCallDecoratorをオーバーライドし、実行したいJavaScriptを追加したAjaxCallDecoratorを戻り値として返します。
AjaxCallDecoratorでは、decorateScriptというメソッドをオーバーライドし、その内部で実行したいJavaScriptを記述します。decorateScriptの第二引数のscriptには、本来Ajax更新で実行されるべきJavaScriptが記述されていますので、実行したいJavaScriptを記述したあと、scriptをその後に追加するようにしてください。

3. wicketGlobalPostCallHandlerに関数を代入する

 最後に、wicketGlobalPostCallHandlerへ関数を登録する方法です。こんな方法があったのか、的なやり方ですが、上記の2つに比べると非常に簡単に使うことが出来ます。

 このwicketGlobalPostCallHandlerは、JavaではなくJavaScript側に記述します。"Global"とあるように、全てのAjax更新に対して処理を行うことができるので、例えば更新対象にjQueryプラグインを適用したい場合などに非常に便利です。

wicketGlobalPostCallHandler = function(){
    alert('update complete!');
};

 上記のコードを、JavaScript側に記述します。これでAjax更新後にダイアログが表示されます。
また、このコードは特定のコンポーネントの更新時ではなく、ページ内に存在するコンポーネントのいずれかが更新された時に毎回呼び出されます

 僕が普段使う方法は以上の3つです。多分他にもやり方はあると思うので、知ってる方はコメントにでも書いてくれるとありがたいです。

0 件のコメント :

コメントを投稿