ReCAPTCHA ajax loaded theme problem

Asked 11/3, 2011 at 22:30 Answered 14/3, 2011 at 20:33

Solved javascript jquery themes recaptcha getscript

Can not figure out how to theme an ajax loaded recaptcha. The below code does not work.
From Google Recaptcha

Saw this post Recaptcha ajax API custom theme not working, but I am definitely viewing in localhost and recaptcha is working fine, just not changing themes.

Anyone have advice on how to get the white theme to work?

    <script type='text/javascript'>
        var RecaptchaOptions = {
            theme : 'white'
         };
    </script>
    <div id="recaptcha_content">
      <noscript>
        <iframe src="http://www.google.com/recaptcha/api/noscript?k=6Ldr7woAAAAAADa_69Mr-EZKAeYyEx9N08q" height="300" width="500" frameborder="0"></iframe><br />
        <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
        <input type='hidden' name='recaptcha_response_field' value='manual_challenge' />
      </noscript>
    </div>
    <script type="text/javascript">
    $(document).ready(function() {
        $.getScript('http://www.google.com/recaptcha/api/js/recaptcha_ajax.js',
            function() {Recaptcha.create("6Ldr7woAAAAAADa_69Mr-EZKAeYyEx9N08q", "recaptcha_content");
        });

    });
    </script>

Measureless answered 11/3, 2011 at 22:30 Comment(2)

wow, first time I have issued a bounty, what great results and quickly. Found the problem and yes it was simpler then I thought. Thanks for everyones help. – Measureless 14/3, 2011 at 23:15

Thank you for question. It looks like it is single example of using old reCaptcha v1 in internet. – Gildus 21/8, 2015 at 12:45

I't doesn't look like you are adding your options that you have set RecapthcaOptions. Try changing to:

$.getScript('http://www.google.com/recaptcha/api/js/recaptcha_ajax.js',
        function() {Recaptcha.create("6Ldr7woAAAAAADa_69Mr-EZKAeYyEx9N08q", "recaptcha_content", RecaptchaOptions);
});

See the doc's, the third option passed to the .create() method is the options. You are setting up a variable outside the function to set the options, but don't include them.

Kazukokb answered 14/3, 2011 at 20:9 Comment(2)

Thanks Scoobler, yes it was that easy. – Measureless 14/3, 2011 at 23:16

No problem, glad to have helped out!! – Kazukokb 14/3, 2011 at 23:27

@jhanifen: I got it working after using most of the code from http://wiki.recaptcha.net/index.php/Installation, try this --

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    </head>

    <body>

    <script type="text/javascript">
    $(document).ready(function() {
        $.getScript('http://www.google.com/recaptcha/api/js/recaptcha_ajax.js',
            function() {
                Recaptcha.create("6Ldr7woAAAAAADa_69Mr-EZKAeYyEx9N08q", 
                "recaptcha_content",
                {
                    theme: "white", 
                    callback: Recaptcha.focus_response_field
                }
            );
        });
    });
    </script>

    <div id="recaptcha_content">
      <noscript>
        <iframe src="http://www.google.com/recaptcha/api/noscript?k=6Ldr7woAAAAAADa_69Mr-EZKAeYyEx9N08q" height="300" width="500" frameborder="0"></iframe><br />
        <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
        <input type='hidden' name='recaptcha_response_field' value='manual_challenge' />
      </noscript>
    </div>

    </body>
</html>

Floatation answered 14/3, 2011 at 20:4 Comment(1)

Thanks stealthyninja, this worked great. You or the answer above would have been great. – Measureless 14/3, 2011 at 23:18

I't doesn't look like you are adding your options that you have set RecapthcaOptions. Try changing to:

$.getScript('http://www.google.com/recaptcha/api/js/recaptcha_ajax.js',
        function() {Recaptcha.create("6Ldr7woAAAAAADa_69Mr-EZKAeYyEx9N08q", "recaptcha_content", RecaptchaOptions);
});

See the doc's, the third option passed to the .create() method is the options. You are setting up a variable outside the function to set the options, but don't include them.

Kazukokb answered 14/3, 2011 at 20:9 Comment(2)

Thanks Scoobler, yes it was that easy. – Measureless 14/3, 2011 at 23:16

No problem, glad to have helped out!! – Kazukokb 14/3, 2011 at 23:27

First of all, your key is invalid or wrong, or you wanted that to be posting here :D If not wanted. try to get a new one, and maybe make it a global one (could affect the localhost stuff). Or upload and test the code on the domain you specified.

This snippet works for my global public key, i set the theme directly on creation

<html>
<head>
<title>recaptcha test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
</head>
<body>    
    <div id="recaptcha_content">
      <noscript>
        <iframe src="http://www.google.com/recaptcha/api/noscript?k=publickey" height="300" width="500" frameborder="0"></iframe><br />
        <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
        <input type='hidden' name='recaptcha_response_field' value='manual_challenge' />
      </noscript>
    </div>
    <script type="text/javascript">
    $(document).ready(function() {
        Recaptcha.create("publickey",
                         "recaptcha_content", {
                             theme: "white",
                             callback: Recaptcha.focus_response_field
        });
    });
    </script>   
</body>
</html>

Pylle answered 14/3, 2011 at 20:33 Comment(2)

Yes the key was changed a bit before posting. But the is not the same as my example, although the approach would have worked. – Measureless 14/3, 2011 at 23:17

I liked this solution best because it's only using jQuery for the to help with onLoad. This method will also work for iPhone 3GS, when the <script src="//www.google.com/recaptcha/api/challenge?k=<key>"></script> method doesn't always load on the first go. – Sunder 31/3, 2014 at 23:22

Going the Occam's Razor way, can you verify that the script for setting the theme is before the form element. As stated several times in the docs, the script does not work inside or after the form element.

Undershrub answered 14/3, 2011 at 20:8 Comment(0)

Recommended topics

Hot tags