Skip to main content

Joomla3 and Recaptcha: endless spinning wheel?

| Gianluca Gabella | Tips & Tricks
share on facebook share on twitter share on linkedin

Index:


In recent months, some sites made with Joomla3 and with the Google ReCaptcha component installed and configured have stopped working: let's find out how to solve the problem!

It's all the fault of Mootools!

But let's go in order.

What is Mootools?

It is a free JavaScript library, created way back in 2006 with the aim of simplifying the lives of JavaScript programmers in carrying out DOM management tasks. It was developed until 2016, reaching version 1.6
This library has always been integrated into the Joomla! core. up to version 3, from version 4 onwards this library has been removed.

What does Mootools have to do with Google ReCaptcha?

In theory nothing, but since it is frontend code, an incompatibility problem between the two arose. Quite simply, the "I am not a robot" check (which is present with version 2 of ReCaptcha, so we are not talking about the invisible version) has stopped working and as the only output we have a wheel that turns infinitely. We are talking about this checkbox:

gif recaptcha di google

Ok, this is my case: how do I solve it?

If this described is your case, then you have:

  • Joomla 2.5 or Joomla 3 site
  • A template that uses mootools
  • ReCaptcha enabled

you have two quick and easy ways to solve:

Install an external extension

You can install a free third-party extension that is still on the JED: https://extensions.joomla.org/extension/mootools-enabler-disabler/

Just install this plugin like all the others:

  1. Top menu -> Extensions
  2. Management -> Install
  3. Select and upload the ZIP package you downloaded from JED

Once the installation is complete you will need to enable the plugin. The steps are as follows:

  1. Top menu -> Extensions
  2. Plugins
  3. search for "moo"

The plugin you just installed should pop up:

plugin mootools enabler disabler

If it is disabled just click on the red X to enable it. If it is enabled you can click on the title to enter its configuration screen.

The configuration screen is made up of two main tabs:

  • Plugin, where the following parameters are present
    • Mootools (on/off): You can select whether to enable or disable mootools
    • Mootools-more (on/off): you can select whether to enable or disable mootools-more which is an additional set of features for mootools
    • Disabled Scripts and Disabled Stylesheets to manually add other scripts that you want to remove from your Joomla site
  • Autoenable
    • Enable for article edition: signals the plugin to load mootools automatically when editing articles from the frontend
    • Enable frontend com_users: signals the plugin to load mootools automatically when we are in the user area of ​​the site from the frontend
    • Autoenabled components: here you can write a list of components (in code format, such as com_content, com_k2, com_users, etc...) where mootools will be loaded automatically

Once you disable mootools on the page with the captcha it will work correctly again. Hurray!

Edit mootools code manually

However, there is a problem: if my template makes extensive use of mootools and I disable it, it is easy for many javascript scripts to stop working, compromising the correct workflow of my website.

So how can we solve it without completely disabling this framework?

A github user comes to our aid where he reports exactly which lines of code to modify. You can read his comment here.

The part of code we need to modify is this:

Array.from = function(item){
	if (item == null) return [];
	return (Type.isEnumerable(item) && typeof item != 'string') ? (typeOf(item) == 'array') ? item : slice.call(item) : [item];
};

and we need to replace it with this:

Array.from = function(item){
	if(new Error().stack.indexOf('recaptcha') >= 0) return [].slice.call(item); // Single line added for reCaptcha fix
	if (item == null) return [];
	return (Type.isEnumerable(item) && typeof item != 'string') ? (typeOf(item) == 'array') ? item : slice.call(item) : [item];
};

How you do it? Here are the step by step steps:

  1. With an FTP client like FileZilla, enter your hosting space where the site is installed (usually the public_html folder)
  2. Navigate into the /media/system/js folder
  3. Inside, among the various files, there are two called:
    1. mootools-core.js
    2. mootools-core-uncompressed.js
  4. Download them to your PC
  5. Open them with a text editor (like notepad or notepad++)
  6. Find the first block of code and replace it with the second
  7. Save the file and reload it online via FTP

If everything went well your ReCaptcha should now work. Remember to clear your browser cache because it may have saved the "old" script.

If you are unable to make this change, you can download the two updated files directly from GitHub by clicking here.

End! Happy ReCaptcha everyone!


If you liked this article, please share it!

share on facebook share on twitter share on linkedin
condividi su Facebookcondividi su Twittercondividi su LinkedIncondividi su WhatsAppcondividi su Telegram