如何仅在加载jQuery对话框时加载recaptcha代码

时间:2011-01-13 21:01:47

标签: jquery recaptcha

我在jQuery对话框中有一个重新访问代码。

出于某种原因,当我在firefox中加载页面时,它会挂起(虽然在IE / Chrome上运行得很好)。 我发现对话框中的recaptcha导致了它。

我想如果我只在用户打开可能解决问题的对话框时加载重新访问代码,并且还帮助我减少出站连接的数量。

这是与recaptcha相关的位的'view source':

<div id="dialog-form" title="Create new user"> 
    <p class="validateTips">You can also Connect with Facebook</p> 
    <fb:login-button perms="publish_stream,create_event,rsvp_event,user_birthday,user_events,user_hometown,user_location,user_online_presence">Login to Facebook</fb:login-button> 
    <form id="regform" action="" method="post"> 
    <fieldset> 
        <label for="name">Username</label> 
        <input type="text" name="username" id="name" class="text ui-widget-content ui-corner-all" value="" /> 
        <label for="email">Email</label> 
        <input type="text" name="email" id="email" class="text ui-widget-content ui-corner-all" value="" /> 
        <label for="password" style="float:left;">Password&nbsp;&nbsp;&nbsp;&nbsp;</label> 
        <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" /> 
        <input type="hidden" name="reg" value="reg" /> 
    </fieldset> 
    <script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LerjL4SAAAAAG3sq_40sHyvch501El5JoNkHqOR"></script> 

    <noscript> 
        <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LerjL4SAAAAAG3sq_40sHyvch501El5JoNkHqOR" height="300" width="500" frameborder="0"></iframe><br/>
        <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
        <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
    </noscript>     </form> 
</div> 

它位于页面底部,就在标签之前,所以它不是嵌套的或任何东西。

我该怎么做?

谢谢,

4 个答案:

答案 0 :(得分:5)

如果您打算在弹出对话框中使用reCaptcha,我强烈建议您使用javascript api。我发现在这种情况下FireFox可能无法处理iframe。

在接到客户端javascript中打开对话框的电话后,您要求创建验证码,如下所示:

Recaptcha.create(YOUR_API_KEY,
    "captcha_contain",
    {
    theme: "red",
    callback: Recaptcha.focus_response_field
    }
);

其中“captcha_contain”是对话框中元素的id,大概是一个开放的div。 它也会稍微改变您的服务器端代码,但您可以在API中阅读所有相关内容。

答案 1 :(得分:1)

This thread表示可能是由于HTML无效。 在这种情况下,这是因为<form>被放置在<table>内。 那可能也是你的情况吗?

无论如何,如果你真的想在打开对话框时加载验证码,你必须通过AJAX获取内容。 使用jQuery UI对话框中的open事件来决定何时检索验证码。 我不熟悉reCaptcha的API,但也许有一个Javascript API,否则你必须让你的PHP代码在一个单独的页面上呈现给你的验证码(或以某种方式将它暴露给客户端)。 / p>

答案 2 :(得分:0)

我遇到了与reCAPTCHA和Firefox 3.6类似的问题。另外,相同的代码适用于IE和Chrome。经过大量调试(以及上面答案中的一些提示)后,我发现表单中的<fieldset>标记导致jquery崩溃。

只需移除<fieldset>,错误即告消失。

希望它可以帮助其他人。

答案 3 :(得分:0)

我遇到了这个问题,在使用灯箱时再次在FF3.6中 - 将reCatpcha div加载到页面中,但将其隐藏到表单的onSubmit之前。

通过在reCaptcha表单上使用'visibility:hidden'而不是'display:none'解决了这个问题。

(简单修复,但当时很痛苦 - 以防万一它对任何人都有用:))