Как заставить работать reCapcha в модальном окне Colorbox Ajax

Плохое ПО одного человека — постоянная работа другого.

Кодерская мудрость

Сегодня столкнулся с такой проблемой, на одном из проектов при установке связки Drupal 7 + Webforms + Colorbox + reCaptcha сама reCaptcha нормально отображалась на странице webfom, а вот в модальном окне Colorbox упорно не хотела работать. Рассмотрим как это починить.

Вот ветка с описанием решения на странице самого модуля reCaptcha
https://www.drupal.org/project/recaptcha/issues/2493183#comment-10707288.

Создаем JS файл recaptcha.js

Во первых нам нужно создать файл recaptcha.js и разместить его в корневой директории модуля reCaptcha. Вот его содержимое:

/**
 * @file
 * Drupal JavaScript behaviors for recaptcha.
 */

(function ($, window, Drupal) {
  Drupal.behaviors.recaptcha = {
    attach: function (context) {
      $('.g-recaptcha', context).each(function() {
        if (typeof grecaptcha === 'undefined') {
          return;
        }
        if ($(this).hasClass('recaptcha-processed')) {
          grecaptcha.reset();
        }
        else {
          grecaptcha.render(this, $(this).data());
          $(this).addClass('recaptcha-processed');
        }
      });
    }
  };

  window.drupalRecaptchaOnload = function() {
    $('.g-recaptcha').each(function() {
      grecaptcha.render(this, $(this).data());
      $(this).addClass('recaptcha-processed');
    });
  }
})(jQuery, window, Drupal);

Вносим изменения в модуль recaptcha.module

Для этого нам нужно заменить вот эти строки:

$captcha['form']['recaptcha_widget'] = array(
    '#markup' => '<div' . drupal_attributes($attributes) . '></div>',
    '#suffix' => $noscript,
);

// @todo: #1664602: D7 does not yet support "async" in drupal_add_js().
// drupal_add_js(url('https://www.google.com/recaptcha/api.js', array('query' => array('hl' => $language->language), 'absolute' => TRUE)), array('defer' => TRUE, 'async' => TRUE, 'type' => 'external'));
$data = array(
    '#tag' => 'script',
    '#value' => '',
    '#attributes' => array(
        'src' => url($recaptcha_src, array('query' => array('hl' => $language->language), 'absolute' => TRUE)),
        'async' => 'async',
        'defer' => 'defer',
    ),
);
drupal_add_html_head($data, 'recaptcha_api');

Следующим кодом:

$captcha['form']['recaptcha_widget'] = array(
    '#markup' => '<div' . drupal_attributes($attributes) . '></div>',
    '#suffix' => $noscript,
    '#attached' => array(
        'js' => array(
        drupal_get_path('module', 'recaptcha') . '/recaptcha.js',
        array(
            'data' => url('https://www.google.com/recaptcha/api.js', array('query' => array('hl' => $language->language, 'render' => 'explicit', 'onload' => 'drupalRecaptchaOnload'), 'absolute' => TRUE)),
            'type' => 'external',
        ),
        ),
    ),
);

Теперь остается только очистить кэш сайта и выполнить запуск cron.