开发者

reCAPTCHA AJAX API not working consistently in modal dialog box in Safari

开发者 https://www.devze.com 2022-12-17 03:17 出处:网络
I\'m using reCAPTCHA via its AJAX API to display the captcha in a modal dialog box. I\'m using jqModal to display the boxes, and I\'m using the AJAX version of reCAPTCHA because the PHP version is alr

I'm using reCAPTCHA via its AJAX API to display the captcha in a modal dialog box. I'm using jqModal to display the boxes, and I'm using the AJAX version of reCAPTCHA because the PHP version is already buggy with jqModal (a known bug: http://markmail.org/message/bvip5vyb3czm7ngu).

Now, the reCAPTCHA works fine in Firefox. But in Safari, it doesn't always get displayed. Somet开发者_Go百科imes, it works fine, but about 20% of the time, no reCAPTCHA box is displayed.

The jqModal declaration looks like this:

$().ready(function() {
  $('#modalBox_register').jqm({
  ajax: '/modals/register.php',
  trigger: 'a#registerButtonLink',
  onShow: function(h) {
   h.w.css('opacity', 1.00).fadeIn(300);
   },
  onHide: function(h) {
   h.w.fadeOut(300, function() { if (h.o) h.o.remove(); });
   }
 });
});

And the HTML/PHP within the modal box looks like this:

<div id="registerModal">
 <p class="caption">Registration form:</p>
 <form name="registerForm" id="modalRegisterForm" class="modalForm" action="/register/" method="post">

   <table cellspacing="15" border="0">
    <tr>
     <td class="left"><label for="firstName">First Name:</label></td>
     <td class="right"><input type="text" name="firstName" id="firstName" value="" class="registerModalTextField" /></td>
    </tr>
    <tr>
     <td class="left"><label for="lastName">Last Name:</label></td>
     <td class="right"><input type="text" name="lastName" id="lastName" value="" class="registerModalTextField" /></td>
    </tr>
    <tr>
     <td class="left"><label for="email">Email Address:</label></td>
     <td class="right"><input type="text" name="email" id="email" value="" class="registerModalTextField" /></td>
    </tr>
    <tr>
     <td class="left"><label for="password">Password:</label></td>
     <td class="right"><input type="password" name="password" id="password" value="" class="registerModalTextField" /></td>
    </tr>
    <tr>
     <td class="left"><label for="passwordConfirm">Confirm Your Password:</label></td>
     <td class="right"><input type="password" name="passwordConfirm" id="passwordConfirm" value="" class="registerModalTextField" /></td>
    </tr>

    <tr>
     <td class="left">&nbsp;</td>
     <td class="right"><div id="termswrap">
      <input id="terms" type="checkbox" name="terms" />
               <label id="lterms" for="terms">&nbsp;I have read and accept the <a href="/backmatter/termsofuse/">Terms of Use.</a><br /></label>
              </div><!-- /#termswrap --></td>
    </tr>


    <!-- reCAPTCHA -->
    <tr>
     <td class="left"><label for="captcha">Are you human?</label></td>
     <td class="right"><!-- Using the reCAPTCHA AJAX API, because the non-AJAX API is buggy with jqModal -->
     <div id="recaptcha_div"></div>
     <script type="text/javascript"
      src="http://api.recaptcha.net/js/recaptcha_ajax.js"></script> <script
      type="text/javascript">
          Recaptcha.create("123456789...",
           "recaptcha_div", {
             theme: "white"
          });
         </script>

     </td>
    </tr>


    <tr>
     <td class="left">&nbsp;</td>
     <td class="right"><input type="image" id="submitButton" src="/images/modals/button_register.png" value="Submit" alt="Submit" name="submit" /></td>
    </tr>
   </table>


 </form>
</div><!--/#registerModal-->

Does anybody have a clue why the reCAPTCHA AJAX call isn't working properly in Safari?


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. In any case, here's what fixed my problems:

$('#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.

0

精彩评论

暂无评论...
验证码 换一张
取 消