How to load recaptcha code only when jQuery dialog loads

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.

Answer 2

This thread suggests that it might be due to invalid HTML. In that case it was because a <form> was placed inside of a <table>. Might that be your case as well?

Anyhow, if you really want to load the captcha just on dialog open you will have to get the content through AJAX. Use the open event in jQuery UI Dialog to decide when to retrieve your captcha. I'm not familiar with the API of reCaptcha, but maybe there is an Javascript API, otherwise you will have to let your PHP code render that captcha for you on a separate page (or in some way expose it to the client).