grecaptcha.render is not a function asp net updatepanel

Question

Not sure why this is happening. On postback the captcha disappears so after reading some articles i have the below code which resolves the problem (captcha still displays after postback)

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

<asp:ScriptManager runat="server" ID="sm1"></asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <div class="col-xs-12">
                <div class="g-recaptcha" data-sitekey="XXXXXXXX"></div>

<script language="javascript" type="text/javascript">
    function pageLoad() {
        $('.g-recaptcha').each(function (index, obj) {
             grecaptcha.render(obj, { 'sitekey': 'XXXXXXXX' });
        });
    }
</script>

However in the console window (Chrome) i see the error

Uncaught TypeError: grecaptcha.render is not a function
    at HTMLDivElement.<anonymous> ((index):468)
    at Function.each (jquery.min.js:2)
    at n.fn.init.each (jquery.min.js:2)
    at pageLoad ((index):467)

So changed pageLoad to onloadCallback

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

Which resolves the error but the captcha disappears when i click a button (validation issues on the form)?

Followed steps in these articles but not sure where im going wrong? noCAPTCHA reCAPTCHA disappearing in UpdatePanel Recaptcha in Updatepanel disappears during PostBack

grecaptcha.render is not a function asp net updatepanel

0 Answers0