2

Здравствуйте! Может кто уже сталкивался с такой проблемой.

Имеется ссылка, по клику на которую открывается всплывающее окно magnific popup, тип запроса — ajax. В подключаемом виде находится div с reCAPTCHA от Google, но капча не отображается, лишь только div тот же попадает, который требуется добавить от настроек Google по умолчанию со своим ключом (data-sitekey), и то его не видно (скрыт).

<div class="g-recaptcha" data-sitekey="*************"></div>

Может кто подскажет, как это можно решить?

Например, на сайте Касперского во всплывающем окне эта капча отлично работает.

Обновление:

1) Я пишу между тегами head:

<script type="text/javascript">
   var onloadCallback = function() {
      grecaptcha.render('html_element', {
         'sitekey' : '*****************'            
      });
   };
</script>

2) Затем при открывании окна magnific popup в подключаемом виде следующий код:

<script type="text/javascript">console.log($("#html_element"));
   if ($("#html_element").length > 0) {
      $(".fieldset").append('<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer><\/script>');
   }else { 
      console.log('Такого элемента нет');
   }
</script>

Код первого пункта соответствует коду в документации Google по настройке капчи. По пункту 2, кусочек кода — <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script> — как указано в документации Google по настройке капчи.

3) В процессе открытия всплывающего окна, выполняется php код, исходя из определенного ответа, когда — $rowlog=1div показывается:

<?php if($rowlog):?><div id="html_element"></div><?php endif;?>

Капча отображается отлично, работоспособность, правда, её не проверял ещё.

4) Но, когда $rowlog=0div соответственно не отображается при открывании, далее выполняется вход на сайт с помощью ajax, если получен определенный ответ от сервера с помощью ajax, то с помощью jqury я добавляю этот div:

if(result.captcha === 'yes'){                                          
   $(".yes").fadeIn(500).before('<div id="html_element"></div>');                                             
                                                  
}

Добавляется div отлично, но $("#html_element").length > 0 уже не работает. Как-то можно это исправить?

Подсмотрел на одном сайте, у них капча тоже появляется точно также, как я описал. Но у них пункт 1 и 2 находится в теге head и код пункта 1 и 2 следующий:

<script>
    window.captchaOnLoadCallback = function() {
       if (window.UI.captcha) {
            window.UI.captcha.ready('******************');
       } else {
            console.warn('............');
       }
  };
</script>
<script src="https://www.google.com/recaptcha/api.js?hl=ru&amp;onload=captchaOnLoadCallback&amp;render=explicit" defer></script>
2
  • 1
    Так как ajax - конечно не будет работать, ведь html еще нет. Попробуйте рендерить капчу после запроса, но здесь надо учесть, что если апи капчи грузится асинхронно, то может не успеть подгрузиться. А если капча только в модальном окне, то можно вообще тогда грузить апи вместе с запросом 6 июн 2017 в 17:23
  • @Сергей Мирошник Спасибо. Но, как это реализовать я так и не понял.
    – Дима
    6 июн 2017 в 18:08

2 ответа 2

2

На сколько я знаю гугловые апи - у всех есть два метода инициализации: автоматически и в ручную. Вы пытаетесь использовать автоматический метод, который подразумевает наличие необходимого HTML на странице. Скорее всего (это так, пальцем в небо), у вас есть код на странице, который подключает саму каптчу:

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

Он срабатывает на текущий HTML и создает глобальный объект Recaptcha или grecaptcha (нужно поискать в консоли). Для нового HTML вам необходимо запустить инициализацию каптчи еще раз:

 Recaptcha.create("your_public_key",
    "element_id",
    {
      theme: "red",
      callback: Recaptcha.focus_response_field
    }
  );

или

grecaptcha.render('element_id', {
    sitekey: recaptchaSiteKey,
    callback: function(response) {
        console.log(response);
    }
});

Все зависит от версии API, которое вы используете.

2
  • Спасибо!:) Сейчас попробую разобраться, плюс изучаю сижу документацию. А в element_id указывать id блока куда добавляется капча?
    – Дима
    6 июн 2017 в 18:31
  • да) Но, опять же зависит от версии, может подойдет HTML-элемент, выбранный любым селектором
    – Anon
    6 июн 2017 в 18:33
1

В подключаемом виде для всплывающего окна magnific popup напишите следующее в между тегами <form></form>:

<div id="captcha-yes" class="hidden">                   
     <div class="field captcha">
         <div id="captcha_widget"></div><!--В данный div будет добавлена reCAPTCHA после открытия окна magnific popup-->
     </div>
     <!--По примеру из документации Google-->
     <script type="text/javascript">
       //Объявляем переменную
       var widgetId1;
       var verifyCallback = function(response) {
          //При успешной активации reCAPTCHA, удаляем элемент с содержанием ошибки, появившийся при неудачной попытке при проверке reCAPTCHA с помощью ajax (ответ пришедший от сервера), с этим думаю проблем не возникнет
          $('#captcha-yes').find('.error').remove();       
       };
       //Из документации Google
       var onloadCallback = function() {
         widgetId1 = grecaptcha.render('captcha_widget', {
           'sitekey' : 'your_site_key',
           'callback' : verifyCallback         
         });            
       };
     </script>
     <!--Перезагружаем captcha при неудачной попытке-->
     <script>
       function reloadRecaptcha(){   
         grecaptcha.reset(widgetId1);
       }
     </script>
     <!--Из документации Google-->
     <script async defer src='https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit'></script>
</div>

По-умолчанию для div c id="captcha-yes" установлен класс hidden со значением display: none;

Пример для неудачного ответа от сервера:

if(result.error){
   //При каждой повторной ошибке, удаляем старую, чтобы ошибки не дублировались
   $("#captcha-yes").remove();
   //Добавляем div с ошибкой в начало перед reCAPTCHA
   $("#captcha-yes").prepend('<div class="error">Пожалуйста, подтвердите,
 что Вы не робот</div>'); 
   //Пример по Вашему 4 пункту в обновлении вопроса
   if(result.captcha === 'yes'){ 
      //При ошибке удаляем класс hidden для отображения капчи                                     
      $('#captcha-yes').closest('div').removeClass('hidden');
      //Перезагружаем reCAPTCHA
      reloadRecaptcha(); 
    }
}

Более подробно в документации на официальном сайте.

Для примера, когда только открываете окно и значение переменной $rowlog=1:

 <div id="captcha-yes" class="<?php if(!$rowlog):?>hidden<?php endif;?>">
       ...дублировать не буду...
 </div>

Условием <?php if(!$rowlog):?>hidden<?php endif;?> проверяем, если переменная $rowlog=0, то класс hidden отображаем, reCAPTCHA скрыта, когда $rowlog=1 условие не сработает и reCAPTCHA будет отображена во всплывающем окне при открытии.

Будут вопросы, пишите:)

1
  • 1
    Супер! Спасибо огромное! Всё как надо, всё отлично отработало:))) УРА!!!
    – Дима
    7 июн 2017 в 20:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.