Google reCaptcha doesn't get loaded when Bootstrap call the remote modal

Question

I have defined in my first page something like this :

<span class="btn btn-default"> <a data-toggle="modal"
        id="fillTheFormHiddenInput" data-target="#login-modal" href="login-i">sign in</a>
</span>

and at the end of the first page :

<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>

and this is my second page: (.../login-i)

<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page import="net.tanesha.recaptcha.ReCaptcha" %>
<%@ page import="net.tanesha.recaptcha.ReCaptchaFactory" %>
<div class="modal-dialog" style="width: 350px !important;">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                aria-hidden="true">&times;</button>
            <h4 class="modal-title">Login to Dashboard</h4>
        </div>

        <form:form role="form" method="post" commandName="userCredential">
            <div class="modal-body border-top-less">

                <form:errors cssClass="" path="*" element="div" />

                <form:input path="username" class="form-control"
                    placeholder="Your username" id="inputUsername1" />
                <br />

                <form:password path="password" class="form-control"
                    placeholder="Your Password" id="inputPassword1" />
                <div>
                <%
                    ReCaptcha c = ReCaptchaFactory.newReCaptcha("6LdoF_ISAAAAAH3dYUqRZvpCwPCyH4lfBxdLy_a3", "6LdoF_ISAAAAAGxauxkNaSjv3DTBRmEvawWaklo_", false);
                        out.print(c.createRecaptchaHtml(null, null));
                %>
                </div>

                <br />
                <div class="form-group">
                    <button type="submit" class="btn btn-default btn-block">sign
                        in</button>
                </div>

                <div class="form-group text-center">
                    <a href="${routePath}signup">Sign Up Now !!</a>
                </div>



            </div>
        </form:form>

    </div>
</div>

actually I'm calling a remote modal with this way. but when I click the login button, the reCaptcha doesn't get loaded and this will show out:

Reload the page to get source for: http://api.recaptcha.net/challenge...

I also noticed that the status code is 302 when the script is getting loaded :

what is the problem ??? (for you to know if I load the page login-i without modal the reCaptcha DOES show out)

---

here is the simplified version of the project, you can take a look at it ...

https://app.box.com/s/zduxdiafwzmsw2u6eqm7

Answer 1

The problem is that recaptcha code run with document.write() method. When you call ajax, you can't use that method because of ajax. For example, data-remote in modal use ajax internally.

If you run the code in chrome, you can see the warning below.

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

Google provide other way of recaptcha for solving the problem. You can add the script in your index.jsp first.

<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>

And then, replace the code in login.jsp.

<%
  ReCaptcha c = ReCaptchaFactory.newReCaptcha("YOUR_API_KEY", "YOUR_TOKEN", false);
  out.print(c.createRecaptchaHtml(null, null));
%>

to...

<div id="recaptcha"></div>
<script>
  Recaptcha.create("YOUR_API_KEY",   // update with your api key
    "recaptcha",
    {
      theme: "red",
      callback: Recaptcha.focus_response_field
    }
  );
</script>

That's all. ReCaptcha will show on the modal.

FYI, you need to verify the form. Verifying the User's Answer Without Plugins will be helpful.

Answer 2

In order to complete the Edward's awesome answer, if you are using modals with remote content or any complex asynchronous behavior i'd guarantee the external script has been loaded before the creation of Recaptcha

$.getScript("https://www.google.com/recaptcha/api/js/recaptcha_ajax.js",function(){
  if(typeof Recaptcha != "undefined"){            
     Recaptcha.create("YOUR_API_KEY",  "recaptchaDiv", {
       theme: "red",
       callback: Recaptcha.focus_response_field
     });
  }
  else {
     alert("recaptcha not loaded");
  } 
});

Answer 3

I had a similar issue with the bootstrap modal.

Have you tried adding the modal code directly into your login page rather than calling it from a remote location?

I was using a jsp tag which I imported into my login.jsp and for some unknown reason it caused any js to stop working, I still haven't figured out why but pulling the modal code into the page stopped the issue for me.

Hope that helps.