CODEWITHSUNDEEP
javascriptjqueryhtmlcssrecaptcha
Dexkill
Dexkill

Reputation: 284

Google "reCaptcha" sometimes doesn't get displayed/rendered

Sometimes I have to reload the webpage multiple times till the reCaptcha gets rendered. I and a friend tested both on Firefox and Chrome but the problem is consistent and doesn't seem to depend on the used browser.

The code I use to display my reCaptcha's:

 <script src='https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit' async defer></script>

<script>
        var CaptchaCallback = function(){
            grecaptcha.render('RecaptchaField1', {'sitekey' : '6LdbWAo..'});
            grecaptcha.render('RecaptchaField2', {'sitekey' : '6LfAVAo..'});
            grecaptcha.render('RecaptchaField3', {'sitekey' : '6LfqWwo..'});
            grecaptcha.render('RecaptchaField4', {'sitekey' : '6Lf4sAo..'});
        };

And later in the forms I just added: <div id="RecaptchaField1"></div> with the correct number.

The forms are allways inside of a bootstrap modal if that cares?

Edit: I deleted the async and defer atributes.

Edit 2: Page that has the problems: http://www.dexquote.com

Upvotes: 14

Views: 21375

Answers (5)

Imran Zahoor
Imran Zahoor

Reputation: 2787

The above answer gave me nice direction but it didn't work for me. I came up with a solution that runs 200ms after the popup is loaded. I find this solution more reliable because it works in most of the situations and with other popup libraries too.

$(document).ready(function () {
  $('#loginModal').on('shown.bs.modal', function () {
    setTimeout(function() { 
      if(jQuery('#RecaptchaField1').length) {
        grecaptcha.render('RecaptchaField1', {'sitekey': 'your_site_key'});
      }
    }, 200);
  });
});

And if you are using Divi Popup and want to render the reCaptcha on it, below is the code to use. Please keep this code inside js file that is included in header of the wordpress theme.

DiviArea.addAction('show_area', function() {
  setTimeout(function(){ 
      if(jQuery('#RecaptchaField1').length) {
         grecaptcha.render('RecaptchaField1', {'sitekey': 'your_site_key', 'callback': 'recaptchaDataCallback'}); 
      }
  }, 200);
});

Please also remember to include reCaptcha api code in header or inside popup.

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Upvotes: 0

Carlos Moreira
Carlos Moreira

Reputation: 21

Just put

<script src="https://www.google.com/recaptcha/api.js?onload=callback&render=explicit"></script>

at the end of tag <body>

Ex.

<body>
...some html...
<div id='googleRecaptcha'></div>

<script src="https://www.google.com/recaptcha/api.js?onload=callback&render=explicit"></script>
</body>

Upvotes: -2

Gleb
Gleb

Reputation: 761

I had a similar issue, but my captcha was not rendered and when I tried to call grecaptcha.getResponse() I saw the following error:

Error: Invalid ReCAPTCHA client id: undefined

In my case all custom scripts were included at the bottom of the HTML file, so I had a pure race condition that was mentioned by the recaptcha docs.

Note: your onload callback function must be defined before the reCAPTCHA API loads. To ensure there are no race conditions:

order your scripts with the callback first, and then reCAPTCHA use the async and defer parameters in the script tags (https://developers.google.com/recaptcha/docs/display)

With async and deferoptions the captcha failed 1 of 10 (or sometimes 1 of 30) reloads of the page. But when I removed them both - the situation became clear what was wrong. I hope this mention will be helpful for somebody.

Upvotes: 2

Dusan
Dusan

Reputation: 356

If you have single page with this problem, remove "defer async" from recaptcha script load, and put "defer" on callback function.

Reason why you have problem is that loading remote scripts can last longer than loading other local scripts, so your render function is called before grecaptcha is fully loaded. When you remove defer async from remote script and put defer on callback, grecaptcha will be loaded during the page loading process and it will call callback function which will be triggered after page is completely loaded, so if you have no other "defer" marked scripts, grecaptcha.render() will be last thing to do on that page.

Code would look like this:

<script src='https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit'></script>

<script defer>
        var CaptchaCallback = function(){
            grecaptcha.render('htmlElementId', {'sitekey' : 'yourSiteKey'});
        };
</script>

Upvotes: 5

Heidar
Heidar

Reputation: 689

This problem appeared with me in google maps when initializing the map on hidden div (e.g. a modal). I'd solve this problem by removing the initialization from the page load and initialize each captcha when the modal is being displayed like that:

$(document).ready(function () {
    $('#loginModal').on('shown.bs.modal', function () {
        grecaptcha.render('RecaptchaField1', {'sitekey': '6LdbWAoTAAAAAPvS9AaUUAnT7-UKQMxz6vY4nonV'});
    })
    $('#loginModal').on('hide.bs.modal', function () {
        $("#RecaptchaField1").empty();
    })
});

Upvotes: 14

Related Questions