problems with Google ReCaptcha V2 on interior pages.

[Larry C. Lyons]

Greetings,

I've just started using Recaptcha 2 on the site I'm working on. The ReCaptcha works great on the first or home page. However when I use the exact same code (actually the equivalent to a php include) on the search results page or other interior pages, it does not work. The user clicks the checkbox to verify they are not a robot, the loading icon appears, and does not complete the verification process. It just sits and spins. I've checked this on multiple machines, and browsers. I've left this running for hours as well with no change.

I have also tried including a  grecaptcha.reset('recaptchaDiv'); However when the page loads I get a javascript exception: grecaptcha is not defined.

I am not sure what I am doing wrong here, but here's the code for what I've done both ways, the programmatically rendering the recaptcha and using the data attributes. :

Explictly rendering the captcha

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

<script>

var recaptchaItm;

var onloadCallback = function() {

recaptchaItm = grecaptcha.render(

document.getElementById('recaptchaDiv'), {

'sitekey' : 'site key goes in here',

'theme' : 'light',

'callback' : recaptchaCallback

});

};

function recaptchaCallback() {

$("#caseStatusSearch").submit();

};

$( document ).ready(function() {

       grecaptcha.reset('recaptchaDiv');

    });

</script>

<form name="caseStatusSearch" id="caseStatusSearch" action="url to searchResults" class="uniForm searchForm loginForms">

<fieldset class="blockLabels" style="border: none">

<textarea name="caseNumbers" id="caseNumbers" cols="1" rows="" wrap="off" required="yes"></textarea>

</fieldset>

<div id="recaptchaDiv"></div>

</form>

<!-- -->

I have also tried it using the data attributes as in 

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

<script>

function recaptchaCallback() {

$("#caseStatusSearch").submit();

};

$( document ).ready(function() {

       grecaptcha.reset('recaptchaDiv');

    });

</script>

<form name="caseStatusSearch" id="caseStatusSearch" action="url to searchResults" class="uniForm searchForm loginForms">

<fieldset class="blockLabels" style="border: none">

<textarea name="caseNumbers" id="caseNumbers" cols="1" rows="" wrap="off" required="yes"></textarea>

</fieldset>

<div id="recaptChaDiv" class="g-recaptcha" data-theme="light" data-callback="recaptchaCallback" data-sitekey="site key goes in here"></div>

</form>

<!-- -->

Anyhow many thanks for any suggestions or feedback you can give.

Regards,

larry

[Larry C. Lyons]

Greetings,

As it turned out the issue was NOT with Google Recaptcha. I noticed that when I looked at the Network traffic using the Chrome Dev Tools -> Network to see what was being sent to Google, I noticed that no XHR requests were being sent. So what I suspected was that another script library was blocking the XHR request/response lifecycle with reCaptcha. So I began systematically removing all other libraries and putting them back in one by one.

As it turned out, we were using jQGrid version 3.4. When I took out those libraries, the Recaptcha worked just fine. When I replaced that version of jQGrid with the most recent one, ReCaptcha also worked just fine.

have a good weekend all.

larry