Dexkill Dexkill - 7 months ago 57
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='' async defer></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?

I deleted the

Edit 2:
Page that has the problems:


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('', function () {
        grecaptcha.render('RecaptchaField1', {'sitekey': '6LdbWAoTAAAAAPvS9AaUUAnT7-UKQMxz6vY4nonV'});
    $('#loginModal').on('', function () {