Implement jCaptcha reload with ajax

environment

Thing you want to do

Redraw jcaptcha using ajax by clicking the reload button If you reload the whole screen, jcaptcha will also be reloaded ...

Method

Success story

xhtml


<!--jcaptcha display-->
<div class="jcaptchaItemBlook">
  <h:graphicImage id="jcaptchaImage" value="/jcaptcha" />
</div>

<!--ajax mounting part-->
<h:commandButton class="jcaptchaReloadBtn" value="Image update" 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);
}

Failure example

xhtml


<!--jcaptcha display-->
<div class="jcaptchaItemBlook">
  <img id="jcaptchaImage"  src="#{request.contextPath}/jcaptcha" />
</div>

Explanation etc.

--The parts other than the description of the failure example are the same as the success example. --Since value could not be set as the return value of ajax with the img tag, graphicImage was adopted --When "# {request.contextPath} / jcapcha" is set in the graphicImage tag on the xhtml side, the contextPath is displayed twice, so delete it. --On the java side, it is necessary to add "# {request.contextPath} / jcapcha" as the return value.

An incident has occurred!

--The problem that FireFox and IE do not refresh even though it works fine in chrome was discovered during testing!

How to respond

xhtml


<!--jcaptcha display-->
<div class="jcaptchaItemBlook">
  <p:graphicImage id="jcaptchaImage" value="/jcaptcha" cache="false" />
</div>

--Needed to change to primeFaces tag. --Add cache = "false".

Final example

xhtml


<!--jcaptcha display-->
<h:panelGroup class="jcaptchaItemBlook">
  <p:graphicImage id="jcaptchaImage" value="/jcaptcha" cache="false" />
</h:panelGroup>

<!--ajax mounting part-->
<h:commandButton class="jcaptchaReloadBtn" value="Image update" 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");
} 

--Changed to use setter by setting the return value to void according to the basics of ajax. -I felt it was subtle if it was

, so I changed it to <h: panelGroup>. --getter / setter uses lombok.jar.

Click here for jcaptcha implementation

http://d.hatena.ne.jp/kaiseh/20090502/1241286415 http://www.in-vitro.jp/blog/index.cgi/Library/20050827_01.html

Reference site

https://yoshio3.com/2011/01/18/jsf-20-ajax-support/ https://stackoverflow.com/questions/5822665/jcaptcha-refresh-only-image-not-whole-page

Reference site ② (solve the incident)

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

Recommended Posts

Implement jCaptcha reload with ajax
Implement the Like feature in Ajax with Rails.
Implement GraphQL with Spring Boot
Implement search function with form_with
Implement UICollectionView of iOS14 with CustomCell.
[Rails] Make pagination compatible with Ajax
Item 86: Implement Serializable with great caution
Implement text link with Springboot + Thymeleaf
[Java EE] Implement Client with WebSocket
uitabbarcontroller reload after login with FirebaseAuth
Implement file download with Spring MVC
Memo to get with Struts2 + Ajax