Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


Captcha Refresh

Adobe Community Professional ,
Jan 24, 2013 Jan 24, 2013

Copy link to clipboard

Copied

What is captcha?
Captcha is the image and text field you add to forms to prevent spam bots filling out your forms. It is the image you see and have to type out the letters from that image.


Why you can not do this?

Currently In Business Catalyst there is no native way to have the captcha image refresh. Support will advise that this is not possible as well.

Why do you need it?
With the original version users of a site sometimes could run into issues guessing the current image they see and the only way to get a new image is to refresh the page.
With the addition of the harder captcha image these issues can increase further.

So is it possible?

Most people will tell you - No, BC needs to do this but there is a sollution!

Solution

Basics

What you need is to refresh the image to get a new one. But not only that you need to refresh all aspects of the captcha on a BC form to ensure the input field and all other aspects are also refreshed.
You can achieve this with javascript and partial refreshing of a page.

Traps
Out of the box ajax refreshing part of a page will not work correctly in IE. The reason for this is that IE “Cheats” Its performance by heavily caching content and images and will refuse to release or update that cache when implementing ajax features.

The Solution

Here is the code to make it all work and we will break it down below;

note: This demo has $j which is used in regards to the jquery compatability mode.


Javascript:

//Actual Function
function captchaRefresh(){
                             
if ( $j("#CaptchaV2").length ){


$j("#reload-captcha").click( function(){
                                                            $j("#captchaReload").load(location.href+"?cps="+Math.random()+" #captchaReload>*","");
return false;
});

}

}

// To run the function

captchaRefresh();


HTML:

<div class="clearfix captcha-region">

          <div id="captcha-reload" class="clearfix">{module_captchav2}</div>

          <a href="#" class="btn" id="reload-captcha" title="Reload the captcha image"><img src="/stylesheets/ico/refesh.png" alt="reloadbtn" /></a>

</div>



I have gone with making a content holder for this which you can call CaptchaV3. This makes it very easy to replace and update the captcha module on any form.

/_System/ContentHolders/captchav3.html

So your Content holder would look like this:

<div class="clearfix captcha-region">

          <div id="captcha-reload" class="clearfix">{module_captchav2}</div>

          <a href="#" class="btn" id="reload-captcha" title="Reload the captcha image"><img src="/stylesheets/ico/refesh.png" alt="reloadbtn" /></a>

</div>



And you can call it this:

{module_contentholder,name="captchav3"}

Simply replace your captcha module with this and update your layout if you need to for your form.

Here is how it will look:
(
Image for the button can be whatever you want it to be)

What's Going on?

It looks really simple hey? It actually is but the thinking behind it and the few little aspects of it are key to its success.

This is a function you can place in your script files and then you can call the function.

So what is going on?

if ( $j("#CaptchaV2").length ){

This is basically a simple check to see if the element exists

$j("#reloadCaptcha").click( function(){

This is the trigger, when you click the refresh button you added something will happen.

$j("#captchaReload").load(location.href+"?cps="+Math.random()+" #captchaReload>*","");

Many will know jQuery’s really nice .load but what you may not realise is you can actually self load an element. This is what is happening here.
We are updated the current pages Captcha area element with itself thus refreshing the captcha image and all its workings too!

But what abou tthe Math.random bit, what is all that about you may think?

Well, if you remember I mentioned IE and its caching pain. IF we did not have this the method would not work. No matter how many times you would press the button in IE the content including the image would not refresh itself, IE has cached it and won't let it go.

SO, what you do is trick IE to thinking your loading new content. You do that by passing a variable with current URL used to trick IE to thinking this is totally new content and thus will work in iE.

DEMO

Via: http://bcevangelist.businesscatalyst.com/

TOPICS
Documentation

Views

6.8K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 24, 2013 Jan 24, 2013

Copy link to clipboard

Copied

FAQ:

Q. The code does not work

A. Have you called jQUery correctly?
http://forums.adobe.com/docs/DOC-2964

http://forums.adobe.com/docs/DOC-1721

Q. The image flickers to much, what can I do?

A. You can fix this with CSS. If you specify a width and a height for the div wrapping the image. You can then also set the background image to the same background colour as the captcha image.

Q. My refresh button only works once and then does not do so after.

A. You have the image button inside the #captcha-reload div. This is what is refreshed, move the button outside of this.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 24, 2013 Apr 24, 2013

Copy link to clipboard

Copied

LATEST

Your skills are truely pro.

Thank you!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines