I'm trying to implement recaptcha in one of my forms. I'm using the code below in my form
<script type="text/javascript"
src="http://www.google.com/recaptcha/api/challenge?k=your_public_key">
</script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key"
height="300" width="500" frameborder="0"></iframe><br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40">
</textarea>
<input type="hidden" name="recaptcha_response_field"
value="manual_challenge">
</noscript>
If I follow a link onto the page that contains the recaptcha, it isn't shown. If I then reload the page using the browser then it is shown.
I've figured it out that this is due to using turbolinks.
I know placing data-no-turbolink in the body tag prevents turbolinks for that page and this works, but I'm not sure if this is the proper way to do it and if i want to disable it for the whole page just to get recpatcha working (seems hacky).
I also enclosed the recaptcha code in a div and put data-no-turbolink in the tag but that didn't work.
Is there a way to disable turbolinks just for the form with the recaptcha or is there another way I should be trying to solve this?
To whom it may concern - there is also a simple ajax fix according to the bug report on github (http://github.com/ambethia/recaptcha/issues/83#issuecomment-30019798).
Simply use:
<%= recaptcha_tags ajax: true %>
Worked just fine for me!