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.
2
Replies
AdChoices