How to display recaptcha in an ajax based modal window

Question

I am having a hard time calling a recaptcha in a modal window. When I run the page it works fine but when I call it in modal window it shows as blank. Can you please guide me in what am I doing wrong.

This is my code I have out in my ajax page
Main page
Ajax Page

PS. I am using a custom theme for my recaptcha as its responsive this is my fiddle

 <script type="text/javascript">
var RecaptchaOptions = {
    theme : 'custom',
    custom_theme_widget: 'recaptcha_widget'
};
</script>

<!-- Start Responsive reCAPTCHA -->

<div id="recaptcha_widget" style="display:none" class="recaptcha_widget">
    <div id="recaptcha_image"></div>
    <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect. Please try again.</div>

    <div class="recaptcha_input">
        <label class="recaptcha_only_if_image" for="recaptcha_response_field">Enter the words above:</label>
        <label class="recaptcha_only_if_audio" for="recaptcha_response_field">Enter the numbers you hear:</label>

        <input type="text" id="recaptcha_response_field" name="recaptcha_response_field">
    </div>

    <ul class="recaptcha_options">
        <li>
            <a href="javascript:Recaptcha.reload()">
                <i class="icon-refresh"></i>
                <span class="captcha_hide">Get another CAPTCHA</span>
            </a>
        </li>
        <li class="recaptcha_only_if_image">
            <a href="javascript:Recaptcha.switch_type('audio')">
                <i class="icon-volume-up"></i><span class="captcha_hide"> Get an audio CAPTCHA</span>
            </a>
        </li>
        <li class="recaptcha_only_if_audio">
            <a href="javascript:Recaptcha.switch_type('image')">
                <i class="icon-picture"></i><span class="captcha_hide"> Get an image CAPTCHA</span>
            </a>
        </li>
        <li>
            <a href="javascript:Recaptcha.showhelp()">
                <i class="icon-question-sign"></i><span class="captcha_hide"> Help</span>
            </a>
        </li>
    </ul>
</div>

<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=[[6LdrdOwSAAAAAJBvHd9s5lUjOSVMmXvg44xyb09t]"></script>
<noscript>
    <iframe src="http://www.google.com/recaptcha/api/noscript?k=[[6LdrdOwSAAAAAJBvHd9s5lUjOSVMmXvg44xyb09t]]" height="300" width="500" frameborder="0"></iframe><br>
    <textarea name="recaptcha_challenge_field"></textarea>
    <input type="hidden" name="recaptcha_response_field" value="manual_challenge">
</noscript>

<!-- End Responsive reCAPTCHA-->

Answer 1

In order to show the recaptcha in a modal, you should render the element in which recaptcha exists in an init function because it is necessary that the modal should be rendered in advance to show your recapthca. For example:

In my index.jsp where I have a modal template:

<script type="text/ng-template" id="addBook.html">
    <div class="modal-header">
        <h3 class="modal-title" ng-show="updateFlag">Update Book</h3>
        <h3 class="modal-title" ng-show="!updateFlag">Add New Book</h3>
    </div>
    <div class="modal-body">
    <div ng-show="loading" class="loading"><img src="resources/images/loading.gif"></div>
     <form ng-show="!loading" name="bookForm" ng-init="renderRecaptcha()" ng-submit="submitForm(bookForm.$valid,book)" novalidate>
        <!-- ID -->
        <input type="hidden" name="id" class="form-control" ng-model="book.id">
        <!-- BOOKNAME --> 
        <div class="form-group" ng-class="{ 'has-error' : bookForm.bookName.$invalid && submitted }">
            <label>Book Name</label>
            <input type="text" name="bookName" class="form-control" ng-model="book.bookName" required>
             <p ng-show="bookForm.bookName.$invalid && submitted" class="help-block">Book name is required.</p>
         </div>

            <p ng-show="bookForm.author.$invalid && submitted" class="help-block">Author name is required.</p>
        </div>
        <div class="form-group" id="recaptcha">
        </div>
        <p ng-show="captchaMissing" class="help-block">Captcha required.</p>

        <!-- BUTTONS -->
        <button type="button" class="btn btn-sm btn-primary" ng-really-click="submitForm(bookForm.$valid,book)" ng-really-message="Do yo confirm to proceed?">Submit</button>
     </form>
    </div>

Then I have an init function in my angular file, app.js (Of course, in the corresponding controller):

$scope.renderRecaptcha = function (){
  grecaptcha.render('recaptcha', {
      'sitekey' : '6LcV-gETAAAAAN0Stl6BfUJvj18Ul4CW7HfdJGOf'
  });};

What is to notice here that I have a function "renderRecaptcha" which fills the division element "recaptcha" with a recaptcha and this function is called by the ng-init attribute of the ng-template for angular modal window.

Answer 2

Looking at the Recaptcha docs, it looks like you have to use the Ajax API, rather than their regular API for Ajex Recaptcha requests. You can find more details about it on this page under the header Ajax API. Doing it that way, instead of loading a separate page, is probably the easier method of making it work.

Google has a demo for using an Ajax call here, and making that use a modal window wouldn't be very difficult.