Can't refresh reCaptcha on JQuery Ajax return

Go To StackoverFlow.com

5

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?

2012-04-03 23:31
by John Bowlinger
ah, by "nothing is happening" do literally mean nothing, or do you still talk of a Google error - marue 2012-04-04 08:09
Yeah, I literally mean nothing. Sorry I didn't make that clearer - John Bowlinger 2012-04-04 13:11
Then you need to show your click-handler. Has to be some problem there - marue 2012-04-04 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 2012-04-05 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-jquer - marue 2012-04-05 08:18


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(); }

2015-02-24 17:06
by Hicham Benabed
v class="g-recaptcha" id='recaptcha' data-sitekey="xxxxxxxxxx">< - Hicham Benabed 2015-02-24 17:06
If you want to update the answer please edit the answer add details to it instead of a commen - Ram 2015-02-24 17:12
As of April 2015 (or earlier), Google has a new captcha. Using grecaptcha.reset(); is the correct answer that helped me - Dmytro Dzyubak 2015-04-05 16:37
Thanks buddy . It's worked - barış çıracı 2016-05-17 09:17


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.

2013-06-23 02:16
by Proximo
+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 - Time Sheep 2014-01-27 15:46


2

Recaptcha.reload();

( Recaptcha is already loaded )

2012-10-13 20:35
by Sammy


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>
2015-04-24 11:22
by Sara Khan


-1

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;
};
2012-04-04 00:13
by marue
Adding $('#recaptchareloadbtn').bind('click'); still doesn't work for me for some reason : - John Bowlinger 2012-04-04 01:03


-1

$( "#recaptcha_reload_btn" ).click();
2012-06-19 06:39
by napstyr maceda
Proximo's answer is correct $("#recaptcha_reload").click();Christopher Stevenson 2013-11-18 22:13
Ads