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?

Answer 1

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

Answer 2

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.