首页 > 代码库 > JSFのAjaxタグのoneventでbegin/complete/successを使う
JSFのAjaxタグのoneventでbegin/complete/successを使う
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>PrimeFacesの拡張Ajaxタグだとupdate属性が通常のrender属性にあたり、さらに属性でonstart/oncompleteが指定できます。さらにonsuccessも存在します。
実行すると同じです。（ただし以下はテキストもPrimeFacesのコンポ）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。