reCAPTCHA AJAX API ne fonctionne pas de manière cohérente dans la boîte de dialogue modale dans Safari

Question

J'utilise reCAPTCHA via son API AJAX pour afficher le captcha dans une boîte de dialogue modale. J'utilise jqModal pour afficher les boîtes, et j'utilise la version AJAX de reCAPTCHA parce que la version PHP est déjà boguée avec jqModal (un bug connu: http://markmail.org/message/bvip5vyb3czm7ngu).

Maintenant, le reCAPTCHA fonctionne très bien dans Firefox. Mais dans Safari, il n'est pas toujours affiché. Parfois, cela fonctionne bien, mais environ 20% du temps, aucune boîte reCAPTCHA n'est affichée.

La déclaration jqModal ressemble à ceci:

$().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(); }); 
    } 
}); 
}); 

Et le HTML/PHP dans la boîte modale ressemble à ceci:

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

Est-ce que quelqu'un a une idée de pourquoi l'reCAPTCHA AJAX appel n » t fonctionne correctement dans Safari?

Answer 1

Je pense que Safari ré-exécute javascript quand il rend les tags. Et tout contenu d'une boîte de dialogue modale est rendu à nouveau lorsque la boîte de dialogue s'ouvre. De plus, je soupçonne qu'après avoir été rendu, le document.write utilisé par recaptcha devient confus quant à l'endroit où il se trouve et est en désordre. Dans tous les cas, voici ce qui fixe mes problèmes:

$('#captcha-form script').remove();

« captcha forme » est l'identifiant du formulaire contenant le captcha. Supprimez les balises de script afin que les scripts ne soient pas exécutés une seconde fois lorsque Safari les restitue après que jQuery les a déplacés. Les gestionnaires d'événements créés par le script ne sont pas dans les balises de script, donc ils survivent.