環境
- windows7
- java7
- javaServerFaces2.2
- glassfish4.1
やりたいこと
jcaptchaをリロードボタンクリックでajaxを利用して再描画
画面ごとリロードすればjcaptchaもリロードされるけど・・・
方法
成功例
xhtml
<!-- jcaptcha表示部 -->
<div class="jcaptchaItemBlook">
<h:graphicImage id="jcaptchaImage" value="/jcaptcha" />
</div>
<!-- ajax実装部 -->
<h:commandButton class="jcaptchaReloadBtn" value="画像更新" immediate="true">
`<f:ajax listener="#{controller.reload}" render="jcaptchaImage" event="click" />
</h:commandButton>
java
public String reload() throws CaptchaServiceException {
return "#{request.contextPath}/jcapcha" + Math.floor(Math.random() * 100);
}
失敗例
xhtml
<!-- jcaptcha表示部 -->
<div class="jcaptchaItemBlook">
<img id="jcaptchaImage" src="#{request.contextPath}/jcaptcha" />
</div>
説明など
- 失敗例の記載以外の部分は、成功例と同様です。
- imgタグだとajaxの戻り値としてvalueを設定できなかったので、graphicImageを採用
- xhtml側のgraphicImageタグに"#{request.contextPath}/jcapcha"を設定すると、contextPathが2重に表示されたので削除
- java側は逆に戻り値として"#{request.contextPath}/jcapcha"をつけてあげる必要がある
事件発生！
- chromeでは問題なく動作するのに、FireFoxとIEではrefreshされないという問題がテスト時に発覚！
対応方法
xhtml
<!-- jcaptcha表示部 -->
<div class="jcaptchaItemBlook">
<p:graphicImage id="jcaptchaImage" value="/jcaptcha" cache="false" />
</div>
- primeFacesのタグに変更する必要があった。
- cache="false"を追記する。
最終例
xhtml
<!-- jcaptcha表示部 -->
<h:panelGroup class="jcaptchaItemBlook">
<p:graphicImage id="jcaptchaImage" value="/jcaptcha" cache="false" />
</h:panelGroup>
<!-- ajax実装部 -->
<h:commandButton class="jcaptchaReloadBtn" value="画像更新" immediate="true">
<f:ajax listener="#{controller.reload}" render="jcaptchaImage" event="click" />
</h:commandButton>
java
@Getter
@Setter
private String captchaImage;
public void reload() throws CaptchaServiceException {
this.setCaptchaImage("/jcaptcha");
}
- ajaxの基本どおりに戻り値をvoidにし、setterを利用するように変更。
- だと微妙な気がしたのでに変更。
- getter/setter はlombok.jarを使用してます。
jcaptcha実装についてはこちら
http://d.hatena.ne.jp/kaiseh/20090502/1241286415
http://www.in-vitro.jp/blog/index.cgi/Library/20050827_01.html参考サイト
https://yoshio3.com/2011/01/18/jsf-20-ajax-support/
https://stackoverflow.com/questions/5822665/jcaptcha-refresh-only-image-not-whole-page参考サイト②（事件発生解決）
https://www.primefaces.org/docs/vdl/4.0/primefaces-p/graphicImage.html
http://download.oracle.com/otn-pub/jcp/jsf-2.0-fr-eval-oth-JSpec/jsf-2_0-fr-spec.pdf