CODEWITHSUNDEEP
jqueryasp.netasp.net-mvcrecaptcha
Anatastasia Medvedeva
Anatastasia Medvedeva

Reputation: 61

Recaptcha v2 doesn't load every time

I've got two forms on my page, and both of them are protected with reCaptcha v2. I render them explicitly, and sometimes they just won't load. I use ASP.NET MVC5.

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

That's how my HTML code looks:

 <div id="captchaCredits"></div>
 <input type="text" id="captchaCredInput" name="captchaCredInput"
 style="display:none" disabled ="disabled">

(That hidden input is just a trick I use to validate the form).

And that's how I render it:

 var CaptchaCallback = function(){
    var mail = grecaptcha.render('captchaCredits', { 'sitekey': '...', 'theme': 'light'});
}

The problem is: after I decided to render my captcha explicitly, it began to lag: it doesn't load every time I load the page. Everything was fine before, when I rendered it automatically, because I've got only one form to protect from robots back then. How can I solve my problem?

UPD: I've tried to delete one of the captchas, and it didn't help. Also, I've put console.log(123) in the CaptchaCallback function and found out that this function may not even be executed on page load.

Upvotes: 1

Views: 8201

Answers (2)

FedericoC
FedericoC

Reputation: 1

When using explicit rendering (with the callback) it's very important to define the function and THEN call the API, which uses it for the rendering. While modern browsers manage those timings without problems, IE (tested on 10 and 11) requires a rigid order to follow

Upvotes: 0

Anatastasia Medvedeva
Anatastasia Medvedeva

Reputation: 61

The problem was caused by the incorrect script loading order. I've solved it by loading jQuery and other libs in the <head>:

<script type="text/javascript" src="lib/jquery-1.9.1.js"></script>
<script type="text/javascript" src="lib/jquery-ui-1.9.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="//www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>

Upvotes: 5

Related Questions