I'm using the colorbox module to create a modal frame that pops up with the user registration form. Unfortunately the reCaptcha form isn't rendered in the colorbox. I get the fieldset and description that I assume reCaptcha generates but a empty for the form itself:

<div id="recaptcha_ajax_api_container"></div>

I can get the full form to show when using the default Math captcha so I don't think its a colorbox or Captcha issue. It seems to be localized to reCaptcha. I can provide additional information if needed. Any help is appreciated.

Files: 
CommentFileSizeAuthor
#18 recaptcha_ajax_1119086.patch547 bytesLiam Morland

Comments

This might be of help to someone here:

http://stackoverflow.com/questions/2124783/recaptcha-ajax-api-not-workin...

..

I'm also having a similar issue but with Lightbox2 and recaptcha not showing up.

Status:Active» Postponed (maintainer needs more info)

Can you provide a set of steps to reproduce the problem?

Does the problem exist with the development version of reCAPTCHA?

Status:Postponed (maintainer needs more info)» Closed (cannot reproduce)

Presuming problem has been solved.

Status:Closed (cannot reproduce)» Active

Hi,
sorry to re-open this, but I'm experiencing this on a pretty clean installation of D7. I'm using

reCaptcha 7.x-1.7+13-dev (from today)
Captcha 7.x-1.0-beta2
Colorbox Node 7.x-2.4

and I have the problem as described here. I have added a reCaptcha to my site-wide contact form. When I view the page, the reCaptcha appears. When I view the page in a colorbox node, I only get the text:

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.

Thanks
Rich

Project:reCAPTCHA» Colorbox Node
Version:7.x-1.0» 7.x-2.4
Component:reCAPTCHA Captcha» Code

It sounds looks more like the problem is in the Colorbox Node module. The comment in #1 points that way. If the solution linked there works, then Colorbox Node should do something like that for any content that would exhibit the problem. If there is something that needs to be changed about reCAPTCHA to get this to work, I will monitor this issue.

You might also try the latest dev versions of each of the modules, in case it has been fixed.

Hi Liam,

thanks for the quick answer. I just tested the modal window using the math captcha and that is shown ok.

I read the post in #1, but didn't understand what that code is supposed to be changed/entered. It was all a bit cryptic. I'll dig around some more, but if you could help me out with understanding the post in #1 I'd be grateful.

Cheers
Rich

Does re-captcha use attach behaviors? If it only uses document.ready then utilizing a timeout will allow it enough time to render.

It does not use attach behaviors, but there is a ticket about that: #1258910: Move to Drupal.behavior & Drupal.settings. I may have time to give that a try, but I don't use Colorbox Node, so I can't test it.

Try the latest development version of reCAPTCHA. I have fixed #1258910: Move to Drupal.behavior & Drupal.settings.

Hi,

I took the latest DEV version of reCaptcha for a test drive and have the effect that with reCaptcha activated the colorbox-node doesn't even open. The throbber turns and then nothing. If I set the captcha to "image" it all works ok again

Sorry for bad news :-(

Colorbox Node
7.x-2.4+1-dev

CAPTCHA
7.x-1.0-beta2

reCAPTCHA
7.x-1.8-rc1+1-dev

Cheers
Rich

In admin/config/people/captcha/recaptcha, are you checking the checkbox "AJAX API"?

Hi,

yes, with the Ajax box checked the colorbox overlay doesn't appear at all. But unfortunately, without the Ajax box, the overlay appears, but not the captcha widget (just the text as described above).

Cheers
Rich

OK, there are probably some JavaScript errors on your browser's error console which will point towards the problem.

Hi,

this is the output with the Ajax box checked:

Uncaught ReferenceError: Recaptcha is not defined rich:4
Drupal.behaviors.recapcha.attach rich:4
(anonymous function) drupal.js:55
b.extend.each jquery.js:33
Drupal.attachBehaviors drupal.js:53
Drupal.ajax.commands.insert ajax.js:542
Drupal.ajax.success ajax.js:400
ajax.options.success ajax.js:164
c.extend.handleSuccess jquery.js:143
w.onreadystatechange jquery.js:142

Cheers
Rich

Project:Colorbox Node» reCAPTCHA
Version:7.x-2.4» 7.x-1.x-dev
Component:Code» General

Status:Active» Postponed (maintainer needs more info)

Try again with the latest development version. It may have been fixed with #1827922: Always use HTTPS to communicate with reCAPTCHA servers.

I have been having the exact same problems described above, with implementing reCaptcha on a modal popup using the "ajax-register" module. Originally the image would not load. ever. I installed the Dec-7 dev version per your suggestions, and the new situation is this:
(not using the Ajax API): it still does not work.
(using the Ajax API) MOST of the time, the javascript breaks the popup, with a message

Error: ReferenceError: Recaptcha is not defined

a small number of times, it actually worked!
I started looking into this, and to me, this appears to be a "race" condition, where the module's recaptcha.js file gets loaded and executed before the api download from google...

I have validated this using HTTP-Fox
e.g.:

00:00:04.003 0.387 650 17830 GET 200 application/x-javascript https://www.google.com/recaptcha/api/js/recaptcha.js
00:00:04.275 0.050 681 492 GET 200 text/javascript [...]/sites/all/modules/recaptcha/recaptcha.js

4.003 + .387 = 4.390 (recaptcha API ready time)
4.275 + .050 = 4.325 (module's js executed, before we downloaded the whole API file from google!)
Result: Broken window

00:00:05.896 0.439 650 17830 GET 200 application/x-javascript https://www.google.com/recaptcha/api/js/recaptcha.js
00:00:06.198 0.162 681 492 GET 200 text/javascript [...]/sites/all/modules/recaptcha/recaptcha.js

5.869 + .439 = 6.308 (recaptcha API ready time)
6.198 + .162 = 6.360 (module's js executed, AFTER we downloaded the whole API file from google!)
Result: Working reCAPTCHA!

Any ideas on how we might force the module's javascript to wait for the rest of the javascript files to load?

Thanks!

Status:Postponed (maintainer needs more info)» Needs review
StatusFileSize
new547 bytes

Try this patch. This patch puts the call to Recaptcha.create() as a $(document).ready() call. I thought that Drupal.behaviors took care of that, but perhaps this will work.

Thank you very much, the patch on #18 worked like a charm!
99.9% of the times, it worked perfectly. Until I can actually reproduce and monitor that 1 time that it didn't work, I consider this problem solved.

I guess the Drupal.behaviors is concerned only with local/inline scripts, and not external ones...

Thanks again!

Status:Needs review» Fixed

Fixed in d0e0a06.

Version:7.x-1.x-dev» 6.x-1.x-dev
Status:Fixed» Patch (to be ported)

Version:6.x-1.x-dev» 7.x-1.8

Hi Liam,

I'd like to apply your patch from #18, but I'm not finding the recaptcha.js file anywhere in the module files. Could you please explain how to manually apply this patch?

Thanks,

Brian

Version:7.x-1.8» 6.x-1.x-dev

It's not in 7.x-1.8 The file was created by #1258910: Move to Drupal.behavior & Drupal.settings. Use the development version to get both patches. I will tag a release soon.