Can't reset recaptcha => lot's of leftovers in the DOM

[Daniele Tessaro]

Hi everybody,

I have a page which is dynamically loading an overlay box with javascript when the user presses a button. 

This box needs to contain a captcha.

What I've done:

The overlay box contains a <form> and inside of it there's an empty <div id='g-recaptcha-element'>.

After the overlay box is added to the DOM, I load '//www.google.com/recaptcha/api.js?render=explicit&onload=onloadCallback' 

by dynamically adding a proper <script> tag to the DOM through javascript.

The onloadCallback is also dynamically added as a <script> tag in the same way. And it's implementation is the following.

var onloadCallback = function() {grecaptcha.render("g-recaptcha-element", {"sitekey" : "..."} ) }

When I close the overlay box, I call grecaptch.reset();

 

Everything seems to be working but I'm experiencing a weird issue:

when I press the captcha checkbox the captcha textfield (+other stuff) is added to the page. 

If you look at the DOM at that point, at the end of the html, you will see a <div> containing a <table> containing several <tr class='gc-reset'>.

Also, at the same level of the <div> there will be an <ins>.

Then if I enter the captcha and submit the form, or if I just close the box, the <div> and the <ins> are made hidden, but are still there in the DOM.

Although the grecaptcha.reset() is called (I have a log at that point in the code), those 'leftovers' are not removed, but remain there hidden.

The problem is that next time I'll repeat the operation, I'll end up having 2 of those <div> and <ins>.

Neither is the content of the 'g-recaptcha-element' <div> cleared.

Looks like the reset() function, that I assumed would clear that stuff, is not working at all.

I worked it around by using this code just after the grecaptcha.reset() call:

jQuery('#g-recaptcha-element').empty();
jQuery('.gc-reset')[0].parent().parent().parent().remove();

But I'm sure It's not the right way of doing it. 

Thanks!

d.

[Daniele Tessaro]

So it looks I'm not the only one having this problem.

There already had been a discussion here, with several people having the same issue.

https://groups.google.com/forum/?hl=en#!searchin/recaptcha/Uncaught$20SecurityError$3A$20Blocked$20a$20frame$20with$20origin/recaptcha/miaW9qdVIgA/48PRM7kgMYMJ

Is there any plan to fix it?

Thanks!

d.