Implement jCaptcha reload with ajax

environment

• windows7
• java7
• javaServerFaces2.2
• glassfish4.1

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