Can't refresh reCaptcha on JQuery Ajax return

Question

I'm having a devil of a time trying to get Ajax to automatically refresh on a JQuery AJAX callback. I have a comment box with the messages being refreshed posted immediately upon validation of reCaptcha and it would be nice if the reCaptcha could refresh automatically in case someone wants to add another comment immediately afterward. Here's my return function:

 $.post(url, formData, function(data) {
        if (returnString.match(/^Error:/)) {
          $("#interactionResults").html(data).show().fadeOut(6000);
        }
        else if (postNumber == 0) {
          $('#newCommentDisplay').html(returnString).show();
          $.post("http://www.google.com/recaptcha/api", "Recaptcha:reload()");   
        }

When I use:

$.post("http://www.google.com/recaptcha/api", "Recaptcha:reload()");

I get an error:

XMLHttpRequest cannot load http://www.google.com/recaptcha/api. Origin http://localhost:8888 is not allowed by Access-Control-Allow-Origin.

Fair enough, so I try to change that line with this one:

$('#recaptcha_reload_btn').trigger('click');

and still nothing is happening. Does anyone know what's going on?

ah, by "nothing is happening" do literally mean nothing, or do you still talk of a Google error? — marue, Apr 04 '12 at 08:09
Yeah, I literally mean nothing. Sorry I didn't make that clearer. — John Bowlinger, Apr 04 '12 at 13:11
Then you need to show your click-handler. Has to be some problem there. — marue, Apr 04 '12 at 14:02
@marue It's in an Iframe which is what I think may be tripping me up. I think I may need to send a JSON object back to Google. Here's the iframe: — John Bowlinger, Apr 05 '12 at 04:18
Hm, it's not so easy to catch events from an iframe, i'm not even sure if it is possible. If you have outside that iframe, you could use the answer in this post http://stackoverflow.com/questions/4249809/reload-an-iframe-with-jquery — marue, Apr 05 '12 at 08:18

score 6 · Answer 1 · edited Feb 24 '15 at 18:00

6

in my html I have :

<div class="g-recaptcha" id='recaptcha' data-sitekey="xxxxxxxxxx"></div>

I use grecaptcha.reset();

example: if (typeof $('#recaptcha') != "undefined") { grecaptcha.reset(); }

edited Feb 24 '15 at 18:00

Mohamad Shiralizadeh

8,329
6
58
93

answered Feb 24 '15 at 17:06

Hicham Benabed

59
1
3

– Hicham Benabed Feb 24 '15 at 17:06
If you want to update the answer please edit the answer add details to it instead of a comment – Ram Feb 24 '15 at 17:12
1

As of April 2015 (or earlier), Google has a new captcha. Using `grecaptcha.reset();` is the correct answer that helped me. – Dmytro Dzyubak Apr 05 '15 at 16:37

score 3 · Answer 2 · answered Jun 23 '13 at 02:16

3

Use

jQuery("#recaptcha_reload").click();

"#recaptcha_reload", the image itself, is the trigger. #recaptcha_reload_btn will NOT work, because the a-tag is NOT the trigger.

answered Jun 23 '13 at 02:16

Proximo

41
3

+1 because it works no matter which library is used to display the captcha. However `Recaptcha.reload();` is better if you happen to be using the javascript library. – Steen Schütt Jan 27 '14 at 15:46

score 2 · Answer 3 · answered Oct 13 '12 at 20:35

2

Recaptcha.reload();

( Recaptcha is already loaded )

answered Oct 13 '12 at 20:35

Sammy

4,538
8
33
52

Sara Khan · Answer 4 · 2015-04-24T11:28:29.913

0

if you are using new recaptcha 2.0 use this: for code behind:

ScriptManager.RegisterStartupScript(this, this.GetType(), "CaptchaReload", "$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});", true);

for simple javascript

<script>$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});</script>

edited Apr 24 '15 at 11:28

answered Apr 24 '15 at 11:22

Sara Khan

325
1
4
9

score -1 · Answer 5 · edited May 23 '17 at 12:24

You have not bound a click handler to your element. From the jQuery docs:

.trigger( eventType [, extraParameters] )

Description: Execute all handlers and behaviors attached to the matched elements for the given event type.

If you have not attached a handler to your element before calling trigger, there is no click handler to execute.

edit:

When you write $('#recaptcha_reload_btn').bind('click'); you actually set up a click handler, but one that does nothing. You have to tell that clickhandler what to do:

$('#recaptcha_reload_btn').bind('click',function() {
    alert('you just clicked me');
};

If you do not set up a callback handler, the event is just registered but does not trigger any action. Combine this with the solution from this question Reload an iframe with jQuery and you should have your recaptcha doing what you want:

$('#recaptcha_reload_btn').bind('click',function() {
    var iframe = document.getElementById('#recaptcha'); //use your own selector here!
    iframe.src = iframe.src;
};

Adding $('#recaptcha_reload_btn').bind('click'); still doesn't work for me for some reason :( — John Bowlinger, Apr 04 '12 at 01:03

score -1 · Answer 6 · edited Jun 19 '12 at 06:44

-1

$( "#recaptcha_reload_btn" ).click();

edited Jun 19 '12 at 06:44

Botz3000

39,020
8
103
127

answered Jun 19 '12 at 06:39

napstyr maceda

179
3
13

Proximo's answer is correct `$("#recaptcha_reload").click();` – Christopher Stevenson Nov 18 '13 at 22:13

Can't refresh reCaptcha on JQuery Ajax return

6 Answers6