Question

I have a recaptcha code within a jQuery dialog.

For some reason, when I load the page in firefox, it hangs (works great on IE/Chrome though).
I found that the recaptcha in the dialog is causing it.

I thought that if I would load the recaptcha code only when a user opens the dialog that might solve the issue and also help me reduce the amount of outbound connections in general.

this is the ‘view source’ of the bit that is related to the recaptcha:

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

it’s placed at the bottom of the page, right before the tag, so it’s not nested or anything.

How can I do it?

Thanks,

Answer 1

If you plan on using reCaptcha in a popup-dialog, I would strongly suggest using the javascript api. I’ve found that FireFox can have trouble handling the iframe in such situations.

After you receive a call to open the dialog in the client-side javascript, you call for the creation of the captcha like this:

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

Where “captcha_contain” is the id of an element in your dialog, presumably an open div.
It will change your server-side code somewhat too, but you can read all about that in the API.