recaptcha within modal window (fancybox)

I am trying to load a form through ajax within fancybox. It works great, everything works fine.

I used the recaptcha (rails) plugin and got the captcha on the form. Now when the fancybox loads, its getting redirected to an empty page with only captcha on it.

I assume this is some problem with iframe and m开发者_C百科odal window?

Has anyone loaded recaptcha on a form within fancybox? would help me out if you could point me to an example..

appreciate your help...

---

I had the same problem with fancybox. I solved it using the recaptcha ajax API: https://developers.google.com/recaptcha/docs/display#AJAX

---

I have the same problem, though only in Safari (presumably Chrome too). It works fine in Firefox. It has nothing to do with Ruby (I use Grails), and the problem occurs with all jQuery popups (I've tried blockUI, SimpelModal and ThickBox).

As far as I can tell, for some reason when jQuery moves an iframe (which is what ReCaptcha is) in the domtree, Webkit decides to load the iframe content as a new page. Or maybe replaces the page content with the iframe content.

I'm pretty sure it's a Webkit bug, and I have no idea if there is a fix possible.

Edit: turns out there's a fix possible:

$('#captcha-form script').remove();

'captcha-form' is the id of the form containing the captcha. Remove the script tags so the scripts don't get executed a second time when Safari re-renders them after jQuery moves them. The event handlers created by the script aren't in the script tags, so they survive.

I think that Safari re-executes javascript when it re-renders the tags. And anything in a modal dialog gets re-rendered when the dialog opens. Furthermore, I suspect that after having been re-rendered, the document.write used by recaptcha gets confused about where it is and messes up.

---

if anyone is still searching for an easy solution to this, i've managed to get a recaptcha working in fancybox by calling it in as an iframe

if calling it in from a class selector:

<script>
$(document).ready(function() {
     $(".example").fancybox({
          fitToView   : true,
          autoSize    : false,
          openEffect  : 'elastic',
          closeEffect : 'elastic'
     });
});
</script>

Then in your HTML

<a href="http://url.com/iframe" class="example fancybox.iframe>Captcha Fancybox</a>

Or, if you are triggering the fancybox programatically, do something like:

$.fancybox({
     width        : '520px',
     height       : '230px',
     autoSize     : false,
     openEffect   : 'elastic',
     closeEffect  : 'elastic',
     'href'       : 'http://www.url.cc',
     type         : 'iframe'
  });

---

The easy solution to load a form with recaptcha through ajax within fancybox.

<%= recaptcha_tags ajax: true %>