JSFのAjaxタグのoneventでbegin/complete/successを使う

浏览数：36 / 时间：2015年06月09日

PrimeFacesに慣れてしまって、通常のHTMLタグでの記述方法がわからなかったりする点があった…ので、メモ。

Ajaxでリクエスト送信のタイミングやレスポンスが戻るタイミングに何らか(JavaScriptなどで)処理を入れたいことがあります。

今回の自分の例では、テキストのフォーカスアウト時にAjaxで処理を開始してからレスポンスが戻るまでの間に画面操作をブロックしたい。というものでした。

リクエストの送信時にブロックUIを出して、レスポンス受信時にブロックUIを解除する、イメージです。

画面で説明すると

テキストがあって

文字を入力

フォーカスアウトするとAjaxで処理を呼び出して、その間は画面ブロック

Ajaxのレスポンスが戻った時点でブロックが消えて画面が操作できる流れです。

で、通常こうした処理ではAjaxタグにあるonevent属性を使うようです。
以下、実際にお試しで書いたビュー↓

<?xml version=‘1.0‘ encoding=‘UTF-8‘ ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>フォーカスブロックのサンプル</title>
    </h:head>
    <h:body>
        <h:form id="frm">
            <!-- PrimeFaces ExtensionのBlockUIコンポーネント -->
            <pe:blockUI target="frm" widgetVar="blc">
                <h:panelGrid columns="2">
                    <p:graphicImage id="imgLoaderBlc" library="images" 
                       name="ajax-loader.gif" width="15px" height="15px"/>
                    <h:outputLabel id="lblBlcProcessing" 
                       value="処理中だよー" style="font-size: 0.6em;"/>
                </h:panelGrid>
            </pe:blockUI>

            <!-- 入力テキストとAjaxによるチェンジイベント -->
            <h:inputText id="txtInput" value="#{indexBean.inputVal}">
                <f:ajax event="change" listener="#{indexBean.calc()}" render="@form" 
                   onevent="focusBlock" />
            </h:inputText>
        </h:form>
        
        <!-- Block UIの呼出し -->
        <script type="text/javascript">
            function focusBlock(data){
                var ajaxStatus = data.status;

                //statusで処理を振り分ける
                switch(ajaxStatus){
                    //beginだったらブロックUIを表示
                    case "begin":
                        blc.block();
                        break;
                    //completeだったらブロックUIを解除
                    case "complete":
                        blc.unblock();
                        break;
                }
            }
        </script>
    </h:body>
</html>

ajaxタグのonevent属性でJavaScriptの処理を呼びますが、その中でstatusをみてbegin/completeの処理を書いてます。同じようにsuccessも使えるようです。

知らなかった…(^^;

ちなみにPrimeFacesを利用しているとJavaScriptの記述が不要でInputTextの部分が以下のように書けます。

<p:inputText id="pTxtInput" value="#{indexBean.inputVal}">
    <p:ajax event="change" listener="#{indexBean.calc()}" update="@form" 
       onstart="blc.block();" oncomplete="blc.unblock();" />
</p:inputText>