CAPTCHA (reCAPTCHA) not works in modal lightbox on contant form

The module uses a filter: lightbox2_filter_xss().

That means all JavaScript is removed. What's funny is that this other function returns a script which gets removed too (ha! ha!):

Okay! Strike that. 8-) The JavaScript is executed. However, the reCAPTCHA uses:

(1) drupal_add_js() and those entries are not taken in account. You need to add print drupal_get_js(); to the lightbox2_contact() function (shown below).

(2) But that's not enough because the reCAPTCHA also calls drupal_set_html_head() to add a JavaScript in the header. Rather surprising because the drupal_add_js() does what is required, and that can be caught in the file as required, but not if added in the header with the drupal_set_html_head() function.

Yet, at this point it still fails. So does the Message textarea which makes use of a JS to add the resize bar at the bottom of the window and that means the Message textarea does not even appear! (it's hidden by the JS)

So I finally had the idea to look at the JavaScript console because quite often that is why something breaks (i.e. as soon as a JS generates an error, all others are ignored and never executed!) Sure enough there was an error: #974736: "m.lang.contextmenu is undefined" error message.

I used the fix shown in #2 and it started working a lot better! But so far I still don't see the reCAPTCHA... still working on it.

Update: Okay! I got it! We my changes (drupal_set_html_head() with drupal_add_js() in reCAPTCHA and print drupal_get_js();,) I got this script entry:

<script type="text/javascript" src="/https://www.google.com/recaptcha/api/js/recaptcha_ajax.js?b"></script>

which won't work because (a) a slash (/) was added at the start, but especially (b) the browser does not accept a URI that's different from the page URI (i.e. not the same server == suspicious.) The only way I can think of to fix this one is to replace the URI with a URI on your server or put the code inline...

Okay! I got it to work. The recaptcha_ajax.js code needs to be in the recaptcha_init() function so it's always there. Then the $js code needs to be added immediately to the HTML of the button instead of using the drupal_add_js(). That way it works. However, this is not a lightbox2 bug, it comes down to a reCAPTCHA bug instead. So I guess I'll bounce that to the reCAPTCHA maintainers.

The change proposed in the following PHP snippet should not be used. It re-includes all the JavaScripts and that may cause other problems.

/**
 * Get the contact form.
 */
function lightbox2_contact() {
  if (module_exists('contact') && variable_get('lightbox2_enable_contact', FALSE) && user_access('access site-wide contact form')) {
    $path = drupal_get_path('module', 'contact');
    include_once($path .'/contact.pages.inc');
    print drupal_get_form('contact_mail_page');

    // Add this to help get all the JavaScript from the form
    print drupal_get_js();

    // drupal_add_js() with 'inline' didn't seem to work, possibly because this is
    // AJAX loaded content.
    print '<script type="text/javascript">Drupal.attachBehaviors();</script>.';
    exit;
  }
}

As I mentioned in my previous message, this is actually a reCAPTCHA bug and not a lightbox2 problem. At least, not directly.

I have two proposed solutions although either way we want to include the Google AJAX in the init function because that's just necessary there (you cannot get that code later because the browser refuses to load JavaScripts from a different server than the one used to load the page--for security reasons.)

First I propose to have a specialized test (Patch 1), but that is kinda ugly (a hack.) On the other hand, you don't really need to use the drupal_add_js() at all. You can simply append your JS to the HTML of the box (Patch 2). I propose the patches inline because it's easier to see the code changes and see which one you think is best for your module.

P.S. There is another drupal_add_js() call around like 135 which patch1 & 2 do not take in account. It should certainly be handled in a similar way. I propose patch 3, but that means the variable is defined twice. I should be safe though.

drupal_add_js('var RecaptchaOptions = ' . drupal_to_js($recaptcha_options) . ';', 'inline');

Patch 1:

Index: recaptcha/recaptcha.module
===================================================================
--- recaptcha/recaptcha.module	(revision 8529)
+++ recaptcha/recaptcha.module	(working copy)
@@ -5,6 +5,10 @@
  * Uses the reCAPTCHA web service to improve the CAPTCHA system.
  */
 
+function recaptcha_init() {
+  drupal_set_html_head('<script type="text/javascript" src="https://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>');
+}
+
 /**
  * Implements hook_help().
  */
@@ -165,8 +169,12 @@
             '#value' => '<div id="recaptcha_ajax_api_container">' . $html . '</div>',
           );
           $js = "$(function() { Recaptcha.create('$recaptcha_public_key', 'recaptcha_ajax_api_container', {theme: '$recaptcha_theme'});});";
-          drupal_add_js($js, 'inline', 'header');
-          drupal_set_html_head('<script type="text/javascript" src="https://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>');
+          if (arg(0) == 'contact' && arg(1) == 'lightbox2') {
+            $captcha['form']['captcha_form']['#value'] .= '<script type="text/javascript">' . $js . '</script>';
+          }
+          else {
+            drupal_add_js($js, 'inline', 'header');
+          }
         }
       }
       return $captcha;

Patch 2:

Index: recaptcha/recaptcha.module
===================================================================
--- recaptcha/recaptcha.module	(revision 8529)
+++ recaptcha/recaptcha.module	(working copy)
@@ -5,6 +5,10 @@
  * Uses the reCAPTCHA web service to improve the CAPTCHA system.
  */
 
+function recaptcha_init() {
+  drupal_set_html_head('<script type="text/javascript" src="https://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>');
+}
+
 /**
  * Implements hook_help().
  */
@@ -160,13 +164,11 @@
         }
         else {
           $html = ($recaptcha_theme == 'custom') ? theme('recaptcha_custom_widget') : '';
+          $js = "<script type='text/javascript'>$(function() { Recaptcha.create('$recaptcha_public_key', 'recaptcha_ajax_api_container', {theme: '$recaptcha_theme'});});</script>";
           $captcha['form']['captcha_form'] = array(
             '#type' => 'item',
-            '#value' => '<div id="recaptcha_ajax_api_container">' . $html . '</div>',
+            '#value' => '<div id="recaptcha_ajax_api_container">' . $html . '</div>' . $js,
           );
-          $js = "$(function() { Recaptcha.create('$recaptcha_public_key', 'recaptcha_ajax_api_container', {theme: '$recaptcha_theme'});});";
-          drupal_add_js($js, 'inline', 'header');
-          drupal_set_html_head('<script type="text/javascript" src="https://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>');
         }
       }
       return $captcha;

Patch 3:

Index: recaptcha/recaptcha.module
===================================================================
--- recaptcha/recaptcha.module	(revision 8529)
+++ recaptcha/recaptcha.module	(working copy)
@@ -5,6 +5,10 @@
  * Uses the reCAPTCHA web service to improve the CAPTCHA system.
  */
 
+function recaptcha_init() {
+  drupal_set_html_head('<script type="text/javascript" src="https://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>');
+}
+
 /**
  * Implements hook_help().
  */
@@ -160,13 +164,17 @@
         }
         else {
           $html = ($recaptcha_theme == 'custom') ? theme('recaptcha_custom_widget') : '';
+          $js = '<script type="text/javascript">';
+          if (isset($recaptcha_options)) {
+            $js .= 'var RecaptchaOptions = ' . drupal_to_js($recaptcha_options) . ';';
+          }
+          $js .= "$(function() { Recaptcha.create('$recaptcha_public_key', 'recaptcha_ajax_api_container', {theme: '$recaptcha_theme'});});";
+          $js .= "</script>";
           $captcha['form']['captcha_form'] = array(
             '#type' => 'item',
-            '#value' => '<div id="recaptcha_ajax_api_container">' . $html . '</div>',
+            '#value' => '<div id="recaptcha_ajax_api_container">' . $html . '</div>' . $js,
           );
-          $js = "$(function() { Recaptcha.create('$recaptcha_public_key', 'recaptcha_ajax_api_container', {theme: '$recaptcha_theme'});});";
-          drupal_add_js($js, 'inline', 'header');
-          drupal_set_html_head('<script type="text/javascript" src="https://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>');
         }
       }
       return $captcha;

Please share a patch. Is this also an issue in 7.x?

Closing because of inactivity.