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?

• javascript
• ajax
• jquery
• recaptcha

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

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.

Recaptcha.reload();

( Recaptcha is already loaded )

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>

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

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