execute code AFTER Recaptcha.reload() is finished

Question

I have a function below which is called to reload a recaptcha image. It works, reloads the image but won't do anything after that. Basically the form is small that has this recaptcha on it so I've shrunk it and allowed for clicking to enlarge and all that. If the person presses "get another captcha" which calls reloadCAP() it checks to see if it has the class of being the larger image. if it does i need it to add that class and css back to the elements AFTER the new image has loaded but I can't seem to get it to work. Any ideas?

function reloadCAP() {
    if($("#recaptcha_widget img").hasClass('largecap')) {
        Recaptcha.reload();
        $("#recaptcha_widget img").addClass('largecap');
        $('#recaptcha_image').css('height', '62px');
    } else {
        Recaptcha.reload();
    }
}

here's the html for this:

<div id="recaptcha_widget" class="formRow" style="display:none;">
    <span class="f_label">Enter Words Below:</span>
    <input type="text" class="setWidth" id="recaptcha_response_field" name="recaptcha_response_field" />

    <div class="cantread">
        <strong>Can't read this?</strong><br />
        <a href="javascript:reloadCAP()">Get another CAPTCHA</a>
    </div>

    <div id="recaptcha_image"></div> <!-- image loaded into this div -->
        <div class="clear"></div>
        <span class="smalltext">(click to enlarge)</span>

        <br clear="all" />
    </div>
<script type="text/javascript" src="http://api.recaptcha.net/challenge?k=6LfzMMwSAAAAADV6D04jDE6fKwrJ57dXwOEW-vY3&lang=en"></script>

Answer 1

$("#recaptcha_widget img").one('load',function(){
    $("#recaptcha_widget img").addClass('largecap');
    $('#recaptcha_image').css('height', '62px');
});

This will put a one time only listener on the load event of the image that you are reloading and then executes the folowing code.

I used .one() instead of .load() here because you don't want to attach a new listener every time you call reloadCAP()

Edit

Ok, so here's what I believe the issue is. When you call Recaptcha.reload() it is removing the <img /> and replacing it with a new one. So when we are trying to attach the event it is getting removed as the image gets removed.

What you need to do is place the class largecap on the recaptcha_image div and modify your css style to look like

.largecap img {
  height: whatever;
  width: whatever;
}

Answer 2

It sounds like what you actually need is custom theming such that you can style the captcha/image/etc exactly as needed: https://developers.google.com/recaptcha/docs/customization

If you do want to stick to your current implementation, you can hook into Recaptcha's built in (and undocumented) callback functions prior to calling Recaptcha.create().

//Called after Recaptcha.reload() is finished loading
Recaptcha._alias_finish_reload = Recaptcha.finish_reload;
Recaptcha.finish_reload = function (challenge, b, c) {
    //Call original function that creates the new img
    Recaptcha._alias_finish_reload(challenge, b, c);

    $("#recaptcha_widget img").toggleClass('largecap', true);
}

//Called when the initial challenge is received on page load
Recaptcha._alias_challenge_callback = Recaptcha.challenge_callback;
Recaptcha.challenge_callback= function () {
    //Call original function that creates the new img
    Recaptcha._alias_challenge_callback();

    $("#recaptcha_widget img").toggleClass('largecap', true);
}

The reason you're even having this problem is because Recaptcha destroys and creates a new img everytime it reloads, so the styling you added manually will be lost.

Answer 3

Not the ideal solution, but you could put the addClass code above Recaptcha.reload() and just delay it by a second or two.

Hope that helps.