2

I have a Google ReCaptcha component included in a visualforce page which I expose over a Force.com Site. the ReCaptcha functionality displays and works well. An issue occurs though if I place the ReCaptcha code within an apex:OutputPanel and rerender the panel on an actionFunction or commandLink.

The ReCaptcha div (class="g-recaptcha") is empty when the outputPanel rerenders. This does not happen if I don;t use outputPanels and return (I use use a null PageReference) from my actionFunction or apex:commandLink.

I was wondering if anyone knows of a reason for this issue Should the ReCaptcha not display ok whether refreshing a whole page or just rerendering an OutputPanel?

Any help on this would be appreciated.

My ReCaptcha code is as follows

Thanks in advance!

<div class="content-block-1">
    <div class="skin">
        <div class="title"><h3>Spam prevention</h3></div>
        <div class="body">
            <p>To help prevent spam, please confirm you are not a robot.</p>
            <div class="frow">
                <script src='https://www.google.com/recaptcha/api.js'></script>
                <div class="g-recaptcha" data-sitekey="{!myKey}"></div>                         
            </div>
        </div>
    </div>
</div> 
4

The ReCatcha is added to the page by JavaScript when the original page loads so when the part of the page containing the ReCaptacha is replaced via the re-render, you need to tell the JavaScript to run again.

Based on the Explicit rendering after an onload callback documentation, and making use of the Visualforce oncomplete attribute, this works:

<apex:page standardController="Contact">

<apex:form>
    <apex:outputPanel id="panel">
        <div class="title"><h3>Spam prevention</h3></div>
        <div class="body">
            <p>To help prevent spam, please confirm you are not a robot.</p>
            <div class="frow">
                <div id="some-id" class="g-recaptcha" data-sitekey="your-site-key"></div>
            </div>
        </div>
    </apex:outputPanel>
    <apex:commandButton value="Save" reRender="panel" oncomplete="onloadCallback();"/>
</apex:form>

<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
var onloadCallback = function() {
    grecaptcha.render('some-id', {'sitekey' : 'your_site_key'});
};
</script>

</apex:page>
  • Hi Keith, Thank you. I'll look into this at some point today or over the weekend and will provide feedback. Cheers! – RedQueries Apr 8 '16 at 10:08
  • Hi Keith, Thank you. On testing this out it works!!! Your help is appreciated! – RedQueries Apr 10 '16 at 16:29
  • @FRed Glad it works and happy to help. – Keith C Apr 10 '16 at 16:53
  • Hi Keith, I note if I call the function grecaptcha.getResponse() from my submit button if having reRendered the Captcha via onloadCallback it does not work, however grecaptcha.getResponse() works when I don't use outputpanels and onloadCallback. Can you think of a possible cause of this issue also? Thanks. – RedQueries Apr 10 '16 at 17:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.