Liam Dilley - How to implement captcha refresh for Business Catalyst

Liam Dilley - Business Catalyst Expert and pusher of boundaries.
Liam Dilley Have you found some limitations with Business Catalyst, where a specific feature didn't do quite what you needed?  Liam finds a way to do what is often thought of as "impossible".

With tenacity and passion like his, you'II be a BC expert and taking your web development skills to new heights.

Listen to my recent interview with Liam and if he's helped you in this or one of the thousands of forum replies he's made, let him know your appreciation in the comments at the bottom.


Listen to this podcast:

Simply click the play button below to stream the podcast via your browser.

Alternatively, you can download the podcast in .mp3 format for offline listening.

Doing the impossible in BC
Captcha Refresh

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 solution!

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 (a function I place in a .js file and reference on a page or page template) and partial refreshing of a page using ajax.

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;

Javascript:

//Actual Function - I include in a .js file that is referenced on the page or page template that has the web form.

function captchaRefresh(){
                        
if ( $("#CaptchaV2").length ){

              $("#reloadCaptcha").click( function(){
                                            $("#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>

* Remove spaces in { module_captchav2 }

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>

* Remove spaces in { module_captchav2 }

And you can reference it like this:

{ module_contentholder,name="captchav3" }
* Remove spaces

Simply replace your captcha module with the content holder and update your form layout if you need to.

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 ( $("#CaptchaV2").length ){
- This is a simple check to see if the captcha element exists.

$("#reloadCaptcha").click( function(){
- This is the trigger, when you click the refresh button you added, something will happen.
(remember I used a ContentHolder to render my captcha refresh button).

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

Many will know jQuery’s really nice .load feature, but what you may not realise is you can actually self load an element. This is what is happening here and where the magic for captcha refresh is happening.

Clicking the refresh button, which triggers our function ( #reloadCaptcha").click( function() ), we are only updating the current pages Captcha area element with itself ( #captchaReload ) thus refreshing the captcha image and all its workings too!

But what about the 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 random bit, the method would not work in IE. 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 ( +Math.random() ) with current URL used to trick IE to thinking this is totally new content and thus will work in iE.

To see a live working example, check out BC Heroes.

--

Don't forget to comment if Liam's advice has helped you in any way.
@LiamDilley
www.bcheroes.com


Trackbacks (0) | Permalink