Jquery 如何在基于ajax的模式窗口中显示recaptcha

我很难在模式窗口中调用recaptcha。当我运行页面时，它工作正常，但当我在模式窗口中调用它时，它显示为空白。你能告诉我我做错了什么吗

这是我在ajax页面中的代码

另外，我正在为我的recaptcha使用一个自定义主题作为其响应

var RecaptchaOptions={
主题：“定制”，
自定义_主题_小部件：'recaptcha_小部件'
};
不对。请再试一次。
输入上面的单词：
输入您听到的数字：

查看Recaptcha文档，您似乎必须使用Ajax API，而不是Ajex Recaptcha请求的常规API。您可以在AJAXAPI标题下找到关于它的更多详细信息。这样做，而不是加载一个单独的页面，可能是使其工作的更简单的方法

---

Google有一个使用Ajax调用的演示，使用模式窗口并不困难。

为了在模式中显示recaptcha，您应该在init函数中呈现recaptcha所在的元素，因为必须提前呈现模式才能显示您的recapthca。例如：

在我的index.jsp中，我有一个模式模板：

<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>

---

这里需要注意的是，我有一个函数“renderecaptcha”，它用一个recaptcha填充division元素“recaptcha”，该函数由用于角度模态窗口的ng模板的ng init属性调用。

您的fiddle无法工作，因为您无法从其他来源请求页面，但是这不应该影响你的运行网站。嗨，亚当，我给了你2个链接，你可以尝试点击主页链接，看到模式弹出窗口…谢谢亚当，它可以工作，但当我添加自定义选项时，它不工作。函数showRecaptcha（）{Recaptcha.create（“6ld4IQSAAAAAM3NFX_K0vXaUudl2Gk0lpTF3REf”，“Recaptcha_widget”，{tabindex:1，主题：“自定义”，自定义_主题_widget:“Recaptcha_widget”，回调：Recaptcha.focus_response_field}）}

<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>

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