ReCaptcha Disappears after OutputPanel ReRender

Question

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> 

Answer 1

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>