Execute code AFTER RECORDING

Question

I have a function below which a reboot of the recaptcha image is called. It works, reloads the image, but after that does nothing. Basically, the shape is small, which has this inscription on it, so I reduced it and allowed it to click to enlarge it and all that. If a person clicks “get another captcha” that calls reloadCAP (), he checks to see if he has a larger image class. if I need it, to add this class and css back to the elements AFTER a new image is loaded, but I cannot 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 is 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 only listen to once in the load event of the image, which you reload and then execute the following code.

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

Edit

Well, that’s what I think is the problem. When you call Recaptcha.reload() , it removes <img /> and replaces it with a new one. Therefore, when we try to attach an event, it is deleted as the image is deleted.

What you need to do is put the largecap class in the largecap div and change your css style to look like

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

Answer 2

Not an ideal solution, but you can put addClass code above Recaptcha.reload () and just hold it for a second or two.

Hope this helps.

Answer 3

It seems like what you really need is custom themes so you can tag captcha / image / etc exactly like this: https://developers.google.com/recaptcha/docs/customization

If you want to stick with your current implementation, you can hook into Recaptcha's built-in (and undocumented) callback functions before 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 have this problem is because Recaptcha destroys and creates a new img every time it reloads, so styles added manually will be lost.