Dexkill Dexkill - 6 months ago 34
jQuery Question

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

Answer

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();
    })
});
Comments